How do I apply a store to a combobox in ExtJS? - extjs

Question

{
fieldLabel: 'Tip',
name: 'SubjectType',
allowBlank: false,
xtype: 'combo',
displayField: 'name',
valueField: 'type',
typeAhead: true,
forceSelection: true,
queryMode: 'local',
store: subjectTypeStore,
listeners: {
select: function(a,selected,c){
//console.log(a);
var tets = selected[0].data.type;
console.log(tets);
//console.log(c);
}
}
},
{
name: 'SubjectID',
allowblank: false,
xtype: 'combo',
displayField: 'name',
valuefield: 'name',
typeAhead: true,
forceSelection: true,
queryMode: 'local'
}
What I want to do is to apply a combobox store to the second combobox according to the selected item in the first combobox. For example if you select Pokemons then the second combobox should load pokemonStore. You change your mind and you select Smurfs, then the second combobox loads the smurfsStore.
What I want to learn is how to apply the store to an existent combobox.

Answer 1

Here's a simple example JSFiddle
select: function(checkbox,records) {
comp.clearValue();
comp.bindStore(Ext.StoreMgr.lookup(records[0].data.store));
// you can change the value field if needed
comp.displayField = 'petname';
// you can change the display field if needed
comp.valueField = 'id';
// you can change the display template if needed
comp.displayTpl = new Ext.XTemplate(
'<tpl for=".">' +
'{[typeof values === "string" ? values : values["' + comp.displayField + '"]]}' +
'<tpl if="xindex < xcount">' + comp.delimiter + '</tpl>' +
'</tpl>'
);
comp.picker = null;
}