javascriptajaxjsonextjsextjs3

How to populate ExtJS combobox with JSON object containing array?


I have the following JSON, receiving it from backend:

{
    "scripts": [
        "actions/rss",
        "actions/db/initDb",
        "actions/utils/MyFile",
        "actions/utils/Valid"
    ],
    "success": true
}

JSON store:

    this.store = new Ext.data.JsonStore({

        proxy: new Ext.data.HttpProxy({
            url: "http://www.example.com",
            method: 'POST'
        }),
        baseParams: {
            appId: "hsvdvndcnwvwbasxcwyc"               
        },
        root: 'scripts',
        fields: ['value']

    });

Combobox:

    this.aField = new Ext.form.ComboBox({
        fieldLabel      : 'action',
        name        : 'actionName',
        anchor      : "95%",                     
        allowBlank      : false,
        emptyText       : "Select action",            

    triggerAction   : 'all',
    lazyRender      : true,
    mode            : 'remote',
        store           : this.store,
    valueField      : 'value',
    displayField    : 'value'
    });     

So, I am receiving response from backend, it's ok. But my combobox dropdown list is empty (it shows 10 empty lines which are equal to number of items in JSON). I know that the ploblem is in fields property of JSON Store. But what should I put in there to get it work?

Thanks!


Solution

  • Try modifying "JSON store:" code with putting root: 'scripts', in side reader object and add type too and add reader in proxy.

    So JSON store: code should look like below

    this.store = new Ext.data.JsonStore({
       proxy: new Ext.data.HttpProxy({
            url: "http://www.example.com",
            method: 'POST',
            reader: {            
                      type:'json',
                      root: 'scripts'
            }
        }),
        baseParams: {
            appId: "hsvdvndcnwvwbasxcwyc"               
        },
    
        fields: ['value']
    });