How to configure store for combobox in custom shopping world element?

Hello, I am trying to create custom shopping world element with a dropdown selection of shop categories. I have used an example plugin from documentation and have added a combobox field to EmotionElementInstaller::install

    'name' => 'cat',
    'fieldLabel' => 'Category',
    'supportText' => 'Select category',
    'allowBlank' => false,
    'store' => ''

Element settings form is working and field is present but I am getting a following error when I first click on dropdown:

nand dropdown stays empty. It seems to be a problem with combobox template, so its probably a misconfiration of store property, but in all examples I have found it is specified same as I wrote, trying to specify a partial path caused errors when opening shopping world. I can see that is defined in console. How should I specify a store for a field?

Yesterday I have got an answer on Stack Overflow Turns out I have not configured two required properties ‚displayField‘ and ‚valueField‘ which, as I have understood from example in anwer, are specifying which model properties are used for option’s text and value. There is no description of this properties in documentation, so it was totally unclear what they do.

displayField - contain info, which should be visible for customer.

valueField - contain info, which should be send to server as selected value.

As example:

_Ext_. **create** ( **'Ext.form.field.ComboBox'** , { **xtype** : **'combobox'** , **triggerAction** : **'all'** , **name** : **'approve'** , **fieldLabel** :me. **snippets**. **toolbar**. **type** , **store** : _Ext_. **create** ( **''** , { **fields** : [**'id'** , **'type'**], **data** : [{ **"id"** : 0, **"type"** : **'Awaiting'** }, { **"id"** : 1, **"type"** : **'Approved'** }] }), **value** : 0, **labelWidth** : 40, **width** : 150, **emptyText** : me. **snippets**. **toolbar**. **awayting** , **listeners** : { change: **function** (field, value) { me.searchApproveEvent(field, value); } }, **valueField** : **'id'** , **displayField** : **'type'** , **enableKeyEvents** : **true** , **checkChangeBuffer** :500 });

So there is only 2 columns - id and type - you set for display column type and column id as value.

For example you can see themes/Backend/ExtJs/backend/config/view/form/document.js

 { **name** : **'numbers'** , **xtype** : **'config-element-select'** , **valueField** : **'name'** , **displayField** : **'description'** , **store** : **''** , **fieldLabel** : **'{s name=document/detail/numbers\_label}Numbers{/s}'** }

1 Like

I understand how this options work now, I was able to make combobox work yesterday. Thanks for more examples though.