Sencha Touch 2 rendering store data to panel

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.