How to associate an array with arrystore to populate combos in extjs

Question

I have an array like

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

I want to add this data to arraystore as below

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

Turn on binding this array to combos

  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 component shows only the first letter of each word in the array as a, b, c, n, a

How can I use combos correctly as the arry that I use is populated programmatically and then attached to arraystore

Answer 1

The data format consumed by ArrayStore 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 quite simple:

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

Answer 2

Alternatively, if you just pass the array as the storage configuration, this will also work (assuming the latest version):

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

Note that you do not need to specify displayField / valueField if that is the case.