ExtJS combo elements not displaying

Question

My combo elements are not displaying. I am using an inline store as described in this blog :

http://skirtlesden.com/articles/extjs-comboboxes-part-2

items: [
           {
                xtype: 'combobox',    
                store: {
                    fields: ['name'],
                    data: [
                        {name: 'Red'},
                        {name: 'Yellow'},
                        {name: 'Green'}
                    ]},
                maxLength: 64

            }
        ]

But all I see are empty one pixel high spaces where the elements are supposed to render.

Fiddle is here :

http://jsfiddle.net/sr61tpmd/4/

Answer 1

Add displayField:'name' to your combo config, it should look like this...

{
    xtype: 'combobox',    
    displayField:'name', //the name of the field you want to display on the combo
    store: {
        fields: ['name'],
        data: [
            {name: 'Red'},
            {name: 'Yellow'},
            {name: 'Green'}
        ]},
    maxLength: 64
}

You might want to set valueField too, but I'll leave that to you

Answer 2

You are not using an "inline store as described in that blog".

An "inline store as described in that blog" looks like this:

items: [
       {
            xtype: 'combobox',    
            store: [
                    'Red',
                    'Yellow',
                    'Green'
                ],
            maxLength: 64

        }
    ]

or like this:

items: [
       {
            xtype: 'combobox',    
            store: Ext.create('Ext.data.Store', { 
                fields: ['name'],
                data: [
                    {name: 'Red'},
                    {name: 'Yellow'},
                    {name: 'Green'}    ] 
            }),
            maxLength: 64

        }
    ]

But I have to admit that ExtJS developers did not think far enough when they chose not to allow the kind of declaration you tried. But to allow this, a store would need an xtype or similar config option, because as you defined it, it is not clear which kind of store you chose - Ajax Store, JsonP store, Direct Store, Store?

But such a config option is not available in Ext; so a store has to be either created or defined.