Extjs load combobox from store

Question

i want to load my Combobox in a Panel from Store.

var colors = new Object();

Ext.onReady(function(){

colors = Ext.create('Ext.data.Store', {
    fields: ['id', 'name'],
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: 'app/view/main/loadFromDatabase.php',
        reader: {
            type: 'json',
            rootProperty: 'name'
        }
    },
});

The colors i want load a little bit later in my Panel like this:

{ xtype: 'combo', 
  fieldLabel: 'Farbe', 
  name: 'farbe', 
  store: colors , 
  queryMode: 'local', 
  displayField: 'name', 
  valueField: 'id' }

The response of my ajax request of loadFromDatabase.php is:

[ { "id": "1", "name": "Red" }, { "id": "2", "name": "Blue" }, { "id": "3", "name": "Green"}]

this seems like a valid json.

But when i click on the combobox the box is empty. Whats wrong?

Answer 1

Your json should look like the below

'items': [{
                'name': 'Lisa',
                "email": "[email protected]",
                "phone": "555-111-1224"
            }, {
                'name': 'Bart',
                "email": "[email protected]",
                "phone": "555-222-1234"
            }, {
                'name': 'Homer',
                "email": "[email protected]",
                "phone": "555-222-1244"
            }]

Then you can specify your store as

var myStore = Ext.create('Ext.data.Store', {
     fields:['name','email','phone'],
     proxy: {
         type: 'ajax',
         url: '/yourpath.json',
         reader: {
             type: 'json',
             root: 'items'
         }
     },
     autoLoad: true
 });

So you have to make your json as key with array of objects and specify that key in the root property in reader config.There is also no rootProperty property for a normal store.Remove that as well.

Hope this helps you.

Answer 2

i have found an other solution

i don´t know if this solution is better then the other, but it works :)

var colorsFromDB = [];

var colors = Ext.create('Ext.data.Store', {
    id: "colors",
    fields: ['id', 'name'],
    data : colorsFromDB
});

Ext.Ajax.request({
    url: "app/view/main/loadFromDatabase.php",
    method: 'POST',
    success: function( r ) {
        var res = Ext.decode(r.responseText);
        if (res !== null) {
            Ext.each(res.colors, function(obj) {
                colorsFromDB.push({
                    id: obj.id,
                    name: obj.name
                })
            });
            colors.loadData(colorsFromDB);
        }
    },
    failure: function( r ) {
        console.log(r.responseText);
    }
});

Answer 3

Add these to your combo:

listeners : {
    added : function(tis) {
            tis.getStore().load();
    }
}

and add these to your store:

listeners : {
    load : function() {
            Ext.getCmp('yourcomboid').setValue(Ext.getCmp('yourcomboid').getValue());
    }
}

at last, to avoid second loading, add the following to the combo:

mode : 'local'

full code :

{
    xtype : 'combo',
    fieldLabel : 'Role Selection',
    id : 'role',
    hiddenName : 'role',
    hiddenValue : 1,
    editable : false,
    emptyText : 'Please select a role',
    typeAhead : true,
    triggerAction : 'all',
    lazyRender : true,
    mode : 'local',
    listeners : {
        added : function(
                tis) {
            tis.getStore().load();
        }
    },
    store : new Ext.data.JsonStore(
            {
                url : 'getRole',
                listeners : {
                    load : function() {
                        Ext.getCmp('role').setValue(Ext.getCmp('role').getValue());
                    }
                },
                fields : ['id','name' ],
                root : 'resultList',
            }),
    displayField : 'name',
    valueField : 'id'
}