PDA

View Full Version : Populating Combobox from a json



waelhamdan
20 Aug 2012, 9:45 AM
Hello,

How would I populate the categories' name in this json file into a combobox?




{
"data" : [
{
"shop": "A",
"total":18472,
"categories":
[
{
"name" : "accessories",
"quantity" : 17000

},
{
"name" : "hardware",
"quantity" : 24000

},
{
"name" : "covers",
"quantity" : 32000

},
{
"name" : "bags",
"quantity" : 43000

}
]

}

]
}

so the combobox will look like:
-accessories
-hardware
-covers
-bags

scottmartin
20 Aug 2012, 12:56 PM
You can specify the root as 'categories'

Scott.

waelhamdan
20 Aug 2012, 1:42 PM
When setting categories as root I'm getting an error when trying to load the store (right click on store and "load data" using Architect 2): "Unable to load data using the supplied configuration."
Changing it back to data will load the store just fine.

Here's my store


Ext.define('MyApp.store.MyJsonStore', {
extend: 'Ext.data.Store',


requires: [
'MyApp.model.categories'
],


constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
storeId: 'MyJsonStore',
model: 'MyApp.model.categories',
proxy: {
type: 'ajax',
url: 'data/sales.json',
reader: {
type: 'json',
root: 'categories'
}
},
fields: [
{
name: 'name'
},
{
name: 'quantity'
}
]
}, cfg)]);
}
});



and the model



Ext.define('MyApp.model.categories', {
extend: 'Ext.data.Model',


fields: [
{
name: 'name'
},
{
name: 'quantity'
}
]
});


am I missing any thing?

vietits
20 Aug 2012, 4:21 PM
With your given data, you should config root for proxy reader set to "data[0].categories".


Ext.define('MyApp.store.MyJsonStore', {
extend: 'Ext.data.Store',


requires: [
'MyApp.model.categories'
],


constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
storeId: 'MyJsonStore',
model: 'MyApp.model.categories',
proxy: {
type: 'ajax',
url: 'data/sales.json',
reader: {
type: 'json',
root: 'data[0].categories'
}
},
fields: [
{
name: 'name'
},
{
name: 'quantity'
}
]
}, cfg)]);
}
});