How to change combobox store data in ExtJS 4.1

Question

I define a combobox like this

{
  xtype: 'combobox',
  emptyText: 'Functions'
  store: [ 'none' ]
}

then, on some event the store should load new data, so I get the store from the combobox and try this:

oFunctionStore.loadData( ['dothis', 'dothat', 'dosomething' ] );

but after this, the combobox has a dropdown without any visible content, just tiny blank lines.

Answer 1

// Change this...
oFunctionStore.loadData( ['dothis', 'dothat', 'dosomething' ] );

// to this...
oFunctionStore.loadData( [ [ 'dothis' ], [ 'dothat' ], [ 'dosomething' ] ] );

• The combobox implicitly creates an Ext.data.ArrayStore, which will convert arrays into models.

• The data parameter passed to loadData is expected to be either an array of models, or an array of objects than can be converted to models (in this case, an array of arrays).

• On the initial store load, the original array was converted to [ [ 'none' ] ] behind the scenes.

See an example here

Answer 2

carStore - any store for main combo.

carModelStore - store, which should be depended on selection in the carStore - based combo box

var carModelStore = new Ext.data.Store({
    reader: new Ext.data.JsonReader({
        fields: ['id', 'car-model'],
        root: 'rows'
    }),
    storeId: 'car-model-store',
    proxy: new Ext.data.HttpProxy({
        url: 'carmodeldataprovider.json?car-name=lamborghini'
    }),
    autoLoad: true
});


{ xtype: 'combo', name: 'car-name', fieldLabel: 'Car', mode: 'local', store: carStore, triggerAction: 'all',
    listeners: {
        select: function(combo, records, eOpts){
            var carName = records.get('car-name');  // the element selected in combo
            var carModelStore = Ext.StoreMgr.lookup("car-model-store");

            carModelStore.proxy.setUrl('carmodeldataprovider.json?car-name=' + carName, false);
            carModelStore.reload();
        }
    }

}