loading data from a json - arrays

Question

i have data available i want to load like this:
{
"success": true,
"message": null,
"total": null,
"data": [{
"clockTypes": ["_12", "_24"],
"speedTypes": ["MPH", "KMPH"],
"scheduleTypes": ["DEFAULT", "AUTO"]
}]}
i am normaly load the data like this
Ext.define('MyApp.store.comboTimezone', {
extend: 'Ext.data.Store',
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
storeId: 'MyJsonStore5',
proxy: {
type: 'ajax',
url: 'json/timezone.json',
reader: {
type: 'json',
root: 'data'
}
}
}, cfg)]);
}});
now do i get the clocktypes as one record in my combobox. how can i get two records: _12 and _24 in my combobox?

Answer 1

Your root should be... data.clockTypes I -think- ( though I'm not really sure if that would work. )
Hijacking that ajax call to load the data is a bit awkward, since thats not really the right format for the store to consume( is it? )
Ideally you want...
{
"success": true,
"message": null,
"total": null,
"data": [{
name: "_12", name:"_24"]
}]}
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
storeId: 'MyJsonStore5',
valueField:'name',
displayField:'name',
proxy: {
type: 'ajax',
url: 'json/timezone.json',
reader: {
type: 'json',
root: 'data'
}
}
}, cfg)]);
}});
Though this does mean you end up with more ajax calls. Alternatively, if you've got your heart set on populating 3 comboboxes (I'm kinda guessing that's what your trying to do ) from 1 ajax call, then you need to generate the stores dynamically based off the data from
an Ext.request()
However if you cant mess with the data, then we can...
Ext.define('MyApp.store.comboTimezone', {
extend: 'Ext.data.Store',
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
Ext.define('TZ', extend: 'Ext.data.Model',
fields: [{
name: 'name'
}])
me.callParent([Ext.apply({
autoLoad: true,
model: 'TZ',
storeId: 'MyJsonStore5',
proxy: {
type: 'ajax',
url: 'json/timezone.json',
reader: {
type: 'json',
root: 'data'
}
}
}, cfg)]);
//hacky, but works i guess
Ext.Ajax.request({
url: 'my.json',
success: function(response) {
var text = response.responseText;
var json = Ext.JSON.decode(text);
for(var i =0);i<json.data.lenght();i++;){
Ext.data.StoreManager.lookup('MyJsonStore5').add(Ext.create('TZ',{name:json.data[i]}))
}
}
});
}
});
*barrring typos which create bugs.
Basically you call the url, get the data as raw json, and then process it into a format that your store can read.
It's a bit of a hack unfortunately.