why my extjs combobox is not filled dynamically?

Question

Here is my Extjs onReady function

var store = new Ext.data.Store({
                                  proxy: new Ext.data.HttpProxy({
                                  url: '/loginjson.json'
                                  }),

                                  reader: new Ext.data.JsonReader(
                                  {root: 'row', fields:['dblist']}
                                    )
                    });
            store.load();

and here I'm using it in my FormPanel like

renderTo: document.getElementById("loginform"),
                                    title: "Login Form",
                                    items: [{
                                        xtype: 'combo',
                                        fieldLabel: 'genre',
                                        name: 'genre',
                                        store: store,
                                        autoLoad: true,
                                        displayField: 'dblist',
                                    }

and JSON URL of django returns like this

http://localhost:8000/loginjson.json

{"row": [{"dblist": "datalist"}]}

but my combobox is not filled I'm missing somewhere on extJS but couldn't found.

Answer 1

I think the fields property of your JSON reader is not configured correctly. Try this:

reader: new Ext.data.JsonReader({
            root: 'row'
        ,   fields:[{name: "dblist"}]
        })

Answer 2

If you are expecting the ComboBox to behave more like an HTML select field then add to your ComboBox config the property:

triggerAction: 'all'

This will ensure that all items in the store will be displayed when the field's trigger button is clicked.

The ComboBox config will also be needing a valueField property:

valueField: 'dblist'

Also, explicitly calling the store's load method is not necessary. The ComboBox will handle that for you at the appropriate time.