Tommy O Tommy O - 7 months ago 26
Javascript Question

Is data Store required for Combobox?

Is a data Store required to populate a combobox with data? After reviewing the documentation it seems like it is, but I would like to confirm as I am new to ExtJS.


The selection list's options are populated from any Ext.data.Store, including remote stores. The data items in the store are mapped to each option's displayed text and backing value via the valueField and displayField configurations, respectively. - http://docs.sencha.com/extjs/4.0.7/#!/api/Ext.form.field.ComboBox


I have several comboboxes in a form; all of which will contain different options. Does this mean that I will have to create a data Store for each combobox?

Ext.onReady(function() {
console.clear();
Ext.create('Ext.data.Store', {
storeId: 'confiurationDetailsStoreForRead',
fields: ['value', 'name'],
data: [{
"value": "72001",
"name": "Enabled"
}, {
"value": "72002",
"name": "Disabled"
}, {
"value": "72003",
"name": "Required"
}]
});
var configurationDetailsPanel = Ext.create({
xtype: 'form',
url: '/employeeSearchResult',
items: [{
xtype: 'combobox',
fieldLabel: 'Config Type',
store: Ext.getStore('confiurationDetailsStoreForRead'),
queryMode: 'local',
displayField: 'name',
valueField: 'value'
}],

buttonAlign: 'left',
buttons: [{
text: 'Search',
handler: function() {
console.log('Search Pressed');
}
}, {
text: 'Reset',
handler: function() {
this.up('form').getForm().reset();
}
}]
});

//Main Container
Ext.create({
xtype: 'panel',
renderTo: Ext.getBody(),
defaultType: 'button',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [configurationDetailsPanel]
});
});


The code above is an example of one combobox in my form. I'd like to know if there is any way to put the data right in the combox configuration (instead of creating a store then referencing that store in the configuration)? Or is the approach i used in the code above the only approach?

Thanks in advance.

Answer

Yes! You can put the store right into the combobox:

                {
                xtype: 'combobox',
                fieldLabel: 'Config Type',
                displayField: 'name',
                queryMode: 'local',
                store: {
                    fields: [
                        'value',
                        'name'
                    ],
                    data: [
                        {
                            value: '72001',
                            name: 'Enabled'
                        },
                        {
                            value: '72002',
                            name: 'Disabled'
                        },
                        {
                            value: '72003',
                            name: 'Required'
                        }
                    ]
                },
                valueField: 'value'
            }