PDA

View Full Version : list view based on hierarchical JSON data



glarotech
14 Mar 2011, 5:52 AM
Hi

I'm trying to build a list view, based on "hierarchical" JSON data.

JSON:

{
"success": false,
"data": [
{
"parent": "0",
"categories": [
{
"id": "1",
"title": "Top 1"
},
{
"id": "2",
"title": "Top 2"
},
{
"id": "3",
"title": "Top 3"
},
{
"id": "4",
"title": "Top 4"
},
{
"id": "5",
"title": "Top 5"
}
]
}
]
}

store:

Ext.regStore('categories', {
model: 'SubCategory',
autoLoad: true,

proxy: {
type: 'ajax',

url: '/mobileshop/json/categories.php',

reader: {
type: 'json',
root: 'data'
},

listeners: {
exception: function() { console.log('HTTP error occured'); }
}

}
});

models:

Ext.regModel('Category', {
fields: ['parent'],
hasMany: {model: 'SubCategory', name: 'categories'}
});

Ext.regModel('SubCategory', {
fields: ['id', 'title'],
belongsTo: 'Category'
});

view:

MobileShop.views.Catgories = Ext.extend(Ext.List, {

// identifier
id: 'ppsCategoryView',
allowDeselect: false,
singleSelect: true,
itemTpl : '{title}',
grouped : false,
indexBar: false,
listeners: {
itemtap: function(dataView, index, item, e) {
Ext.ControllerManager.get('categories').showCategoryAt(index);
}
},

// initialize view
initComponent: function() {

Ext.apply(this, {
store: Ext.getStore('categories')
});

MobileShop.views.Catgories.superclass.initComponent.apply(this, arguments);

}

});

The list should contain the 5 categories (Top 1 - 5) of the JSON response.

Any ideas?

- domi

glarotech
15 Mar 2011, 1:32 AM
I've found a solution.

Instead of using the data field as root element, I've replaced it with the categories array:

root: 'data.categories'

This seems to be working properly.

To access other fields, outside the root-element, you've to use the proxy/reader instance:


var store = Ext.getStore('categories');
console.log(store.proxy.reader.jsonData.data.parent);

mastak
30 Aug 2011, 6:04 AM
Cool.. How do you sync store changes back to server ?