How to bind array to arrystore in order to populate combo in extjs

Question

I am having array as

var cars = new Array('audi','benz','citron','nissan','alto');

I want to add this data to arraystore like below

 var myStore = new Ext.data.ArrayStore({
        data   : cars ,
        fields : ['names']
    });

On Binding this array store to combo

 var myCombo = new Ext.form.ComboBox({
        store: myStore ,
        displayField: 'name',
        valueField: 'name',
        typeAhead: true,
        mode: 'local',
        forceSelection: true,
        triggerAction: 'all',
        emptyText: 'Select a state...',
        selectOnFocus: true,

    });

The combo is showing only first letter of each word in the array as a, b, c, n, a

How can I properly disply the combo as the arry i am using is is populated programatically and then binding to arraystore

Answer 1

Alternatively, if you just pass the array as the store config, that will also work (assuming a recent version):

new Ext.form.ComboBox({
    store: ['Audi', 'Benz', 'Citron', 'Nissan', 'Alto']
});

Note you don't need to specify displayField/valueField if this is the case.

Answer 2

The format of data the ArrayStore consumes is an array of arrays. Reformatting your store data as follows should allow it to work:

var cars = [['audi'], ['benz'], ['citron'], ['nissan'], ['alto']];

Converting from your format to the required format is simple enough:

for ( var i = 0, c = cars.length; i < c; i++ ) {
    cars[i] = [cars[i]];
}