Sencha Touch 2将数据存储到面板

时间:2014-01-16 00:15:09

标签: view sencha-touch-2 panel store

我正在通过商店从JSON Feed中读取数据。我的问题是我无法在View-Panel中显示数据。

我的面板代码如下:

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

});

我不知道为什么我的观点空白。

1 个答案:

答案 0 :(得分:0)

查看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指定项目模板。