Trying to get a basic combo to work in ExtJS

Question

I want to use a very simple combo box in ExtJS, but I was surprised to learn that it seems as though I have to complexify things by using a store.

I have a single array of data :

var states = [
    {"name":"Alabama"},
    {"name":"Alaska"}
]

I create my model 'State' linking to the 'name' field, and then I create my store linking to the model, and the array of data.

Ext.regModel('State', {
    fields: [
        {type: 'string', name: 'name'}
    ]
});
var store1 = Ext.create('Ext.data.Store', {
    model: 'State',
    data: states 
});

Now I create my combo, as a field in my panel :

var f = Ext.create('Ext.form.Panel', {
    items: [
       {
            fieldLabel: 'hi there',
            xtype: 'combobox',
            name: 'XXXX',
            store:store1,
            maxLength: 64,
            allowBlank: false
        }
    ]
})

Nothing tells me that I am doing anything wrong, but I get an 'Uncaught TypeError: Cannot read property 'indexOf' of undefined ' whenever I try and open the combo.

My fiddle is here :

http://jsfiddle.net/sr61tpmd/1/

Another aside to my question is, what is the simplest way I can present a combobox in ExtjS?

Answer 1

As long as you only want a combo box with same value as displayed, it is entirely possible to define the store as an array.

xtype:'combo',
store:['Alabama','Arkansas',...]

A real extjs store is necessary where your displayed text differs from the value. You can see a working example for this (also using the us states, actually) in the ext docs: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.form.field.ComboBox