sencha touch 从商店数据创建标签答案

【问题标题】：sencha touch create tabs from store datasencha touch 从商店数据创建标签
【发布时间】：2013-10-04 14:26:07
【问题描述】：

我是 Senscha Touch 的新手，我已经为此苦苦挣扎了好几个小时。

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

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

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_1”，内容 = “random_html5” 选项卡 2：标题 = “title_2”，内容 = “random_html5_2”

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

还有 this.callParent();得到“未解析的函数或方法”。

Ext.define('***', {
extend: 'Ext.TabPanel',
xtype: 'informationsTabs',
config: {
    title: 'informationsTabs',

    items: [
        {
            xtype: 'tabbar',
            store: 'InformationTabs',
            title: '',
            html: ['']
        }
    ]
},
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();
} });

截图：http://oi41.tinypic.com/2gsn53p.jpg

【问题讨论】：

标签： extjs tabs touch store

【解决方案1】：

由于存储是动态的，您将无法在静态 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();
    }
});

【讨论】：