I have two comboboxes and I am using a single store that contains the data for 2 combo in 'sg' and 'aod' keys.
Lets say for the 1st combo I want to fill the data within 'sg' key
For the 2nd combo I want to fill the data with key called 'aod'
Then how I can fill the data while render the combos?
Here is my store:
var myStore = Ext.create('Ext.data.Store', {
fields: [{
name: 'sg'
}, {
name: 'aod'
}],
data: [{
'sg': ['1', '2', '3', '4', '5']
}, {
'aod': ['15', '20']
}
]
});
Here is my comobos inside items config
defaults: {
labelAlign: 'top',
width: '20%',
style: {
textAlign: 'center',
color: '#0a4374',
fontSize: '12px',
fontWeight: 'bold'
},
labelSeparator: '',
allowEmpty: false,
editable: false,
cls: 'extraComboBox',
xtype: 'combo',
autoSelect: true,
margin: 10
},
items: [{
fieldLabel: 'Combo 1',
value: '',
//Here I want to load myStore.data.items[0].data.sg
},
{
fieldLabel: 'Combo 2',
value: '',
//myStore.data.items[1].data.aod
}
Thanks for your help!!
By using myStore.getAt(0).get('sg')
I am able to populate the data to 1st combo and same with 2nd combo myStore.getAt(0).get('aod')
.
To set the default values for each combo add
{
fieldLabel: 'Combo 1',
id: 'sg',
store: myStore.getAt(0).get('sg').data,
listeners: {
afterrender: function (combo) {
combo.setValue(myStore.getAt(0).get(combo.id).default);
}
}
}, {
fieldLabel: 'Combo 2e',
id: 'aod',
store: myStore.getAt(0).get('aod').data,
listeners: {
afterrender: function (combo) {
combo.setValue(myStore.getAt(0).get(combo.id).default);
}
}
}
and change the json as follows:
var myStore = Ext.create('Ext.data.Store', {
fields: [
{name: 'sg'},
{name: 'aod'}
],
data: [{
'sg': {
'default': 1,
'data': ['1', '2', '3', '4', '5']
}
}, {
'aod': {
'default': '15',
'data': ['15', '20']
}
}
]
});