Extjs sencha touch从存储数据创建选项卡

我是Senscha Touch的新手，我已经为此奋斗了几个小时

我正在尝试创建一个应用程序，其中主页有1-3个选项卡，其中标题和内容（html5）依赖于json数据

我的模型有两个字段：“标题”和“文本”。 “我的商店”有两个选项卡的虚拟数据：

Ext.define('***', {
    extend: 'Ext.data.Store',
    config: {
        model: '***',
        xtype: 'informationTabs',
        data: [
            {
                title: 'Museum',
                text: 'Random html5'
            },
            {
                title: 'Museum_2',
                text: 'Random html5_2'
            },
            {
                title: 'Museum_3',
                text: 'Random html5_2'
            }
        ]
    }
})

要将其显示为列表，我有以下代码：

Ext.define('***', {
    extend: 'Ext.Panel',
    xtype: 'informationsTabs',
    config: {
        title: 'InformationTabs',
        layout: 'fit',
        items: [
            {
                xtype: 'list',
                store: 'InformationTabs',
                itemTpl: '{title}, {text}'
            }
        ]
    }
});

我如何才能做到这一点，而不是制作一个包含两个项目的列表，而是创建两个选项卡，其中包含标题和文本

所以在这种情况下，我应该有两个标签。 表1:Title=“Title\u 1”，content=“random\u html5” 表2:Title=“Title\u 2”，content=“random\u html5\u 2”

更新： 使用下面的代码（谢谢kevhender！）它“工作”，除了我得到一个额外的“[object]”作为第一个选项卡。单击该选项卡时，此选项也是唯一具有蓝色背景的选项

还有这个.callParent（）；获取“未解析的函数或方法”

---

屏幕截图：

由于商店是动态的，您将无法在静态

config

块中进行完整定义。您可以将选项卡创建放入

initialize

方法中，如下所示：

Ext.define('***', {
    extend: 'Ext.tab.Panel',
    xtype: 'informationsTabs',
    config: {
        title: 'InformationTabs',
        layout: 'fit',
        items: [
            {
                xtype: 'list',
                store: 'InformationTabs',
                itemTpl: '{title}, {text}'
            }
        ]
    },
    initialize: function() {
        var items = [];
        Ext.getStore('InformationTabs').each(function(rec) {
            items.push({
                title: rec.get('title'),
                html: rec.get('text')
            });
        });
        this.setItems(items);
        this.callParent();
    }
});

---

由于存储是动态的，您将无法在静态

config

块中执行完整定义。您可以将选项卡创建放入

initialize

方法中，如下所示：

Ext.define('***', {
    extend: 'Ext.tab.Panel',
    xtype: 'informationsTabs',
    config: {
        title: 'InformationTabs',
        layout: 'fit',
        items: [
            {
                xtype: 'list',
                store: 'InformationTabs',
                itemTpl: '{title}, {text}'
            }
        ]
    },
    initialize: function() {
        var items = [];
        Ext.getStore('InformationTabs').each(function(rec) {
            items.push({
                title: rec.get('title'),
                html: rec.get('text')
            });
        });
        this.setItems(items);
        this.callParent();
    }
});