Sencha Touch 2 将存储数据渲染到面板

Question

我正在通过商店从 JSON 提要中读取数据。我的问题是我无法在视图面板中显示数据。

我的面板代码如下：

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>'
        ),
    },

});

商店代码如下：

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

});

型号代码如下：

Ext.define('Layouts.model.Node', {
    extend: 'Ext.data.Model',

    config: {
        fields: [
            'title',
            'body',
        ]
    },

});

我不知道为什么我的视图是空白的。

Answer 1

看看DataView组件：http://docs.sencha.com/touch/2.3.1/#!/api/Ext.dataview.DataView

DataView 是从存储中呈现数据的正确方法。你的视图会变成这样（未经测试的代码）：

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>'
        ),
    },

});

注意使用 itemTpl 来指定项目模板。