Sencha Architect 生成代码选项卡面板和列表 - 列表不显示在选项卡中...？答案

【问题标题】：Sencha Architect gened code Tab Panel & List - List does not show in Tab...?Sencha Architect 生成代码选项卡面板和列表 - 列表不显示在选项卡中...？
【发布时间】：2012-12-29 09:34:18
【问题描述】：

我错过了什么吗？生成的代码如下图。

列表独立于选项卡可以正常工作...您可以不将列表放在选项卡容器中还是我还需要一个选项？谢谢格雷格

Ext.define('MyApp.view.MyTabPanel', {
    extend: 'Ext.tab.Panel',

    config: {
        items: [
            {
                xtype: 'container',
                title: 'Home',
                iconCls: 'info',
                html: 'Welcome',
                itemId: 'home'
            },
            {
                xtype: 'container',
                title: 'About',
                iconCls: 'info',
                html: 'Awsome',
                itemId: 'about'
            },
            {
                xtype: 'container',
                title: 'Stylists',
                iconCls: 'info',
                html: '',
                itemId: 'contact',
                scrollable: true,
                items: [
                    {
                        xtype: 'list',
                        docked: 'top',
                        styleHtmlContent: true,
                        itemTpl: [
                            '<div>{fname} {lname} {title}</div>'
                        ],
                        store: 'LSstylistStore'
                    }
                ]
            }
        ],
        tabBar: {
            docked: 'bottom'
        }
    }

});

【问题讨论】：

标签： sencha-touch-2 sencha-architect

【解决方案1】：

需要添加布局：类型：适合，使列表显示在选项卡容器内。在 Architect 中选择包含列表的选项卡，在 Ext.Container 布局选项中选择“fit”

            xtype: 'container',
            title: 'Stylists',
            iconCls: 'info',
            html: '',
            itemId: 'Stylists',
            layout: {
                type: 'fit'
            },
            scrollable: true,

【讨论】：