Extjs load combobox from store - extjs

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

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'
}

Answer 2

Your json should look like the below
'items': [{
'name': 'Lisa',
"email": "lisa#simpsons.com",
"phone": "555-111-1224"
}, {
'name': 'Bart',
"email": "bart#simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "home#simpsons.com",
"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 3

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);
}
});