Sencha Touch 2 rendering store data to panel - view

Question

I am reading data from a JSON feed through a Store. My problem is I am unable to display the data in a View-Panel.
My panel code is as follows:
Ext.define('Layouts.view.Node', {
extend: 'Ext.Panel',
xtype: 'node',
config: {
title: 'Node Data',
styleHtmlContent: true,
scrollable: 'vertical',
tpl: new Ext.XTemplate(
'<div>TITLE: {title}</div>'
),
},
});
The Store code is as follows:
Ext.define('Layouts.store.Node', {
extend: 'Ext.data.Store',
config: {
storeId: 'Node',
autoLoad: true,
model: 'Layouts.model.Node',
proxy: {
type: 'ajax',
url: 'http://178.79.128.76/revivaltimes/app/content/0',
reader: {
type: 'json',
rootProperty: 'JSON',
}
},
},//config
});
And the model code follows:
Ext.define('Layouts.model.Node', {
extend: 'Ext.data.Model',
config: {
fields: [
'title',
'body',
]
},
});
I don't know why my view comes up blank.

Answer 1

Take a look at the DataView component: http://docs.sencha.com/touch/2.3.1/#!/api/Ext.dataview.DataView
The DataView is the proper way to render data from a store. Your view would become something like that (untested code):
Ext.define('Layouts.view.Node', {
extend: 'Ext.dataview.DataView',
xtype: 'node',
config: {
title: 'Node Data',
styleHtmlContent: true,
scrollable: 'vertical',
store: 'Node',
itemTpl: new Ext.XTemplate(
'<div>TITLE: {title}</div>'
),
},
});
Note the use of itemTpl for specifying the item template.