sencha-touch - Sencha Touch 中的选项卡面板和卡片布局

Question

在我的应用程序的主布局中，将有三个主面板，两个具有动态内容的常规面板和一个选项卡面板。选项卡面板不是卡片布局的一部分，工作正常，但是当我做这样的事情时，选项卡面板会损坏（选项卡没有切换并且“tabBarPosition：'bottom'”被忽略：

<script type="text/javascript" charset="utf-8">

mainPanel = Ext.create("Ext.Panel", {
    iconCls : 'info',
    title : 'Info',
    html : 'this is info panel'
});
contentPanel = Ext.create("Ext.Panel", {
    iconCls : 'more',
    title : 'About Us',
    html : 'this is about panel'
});
statisticsPanel = Ext.create("Ext.tab.Panel", {
    tabBarPosition: 'bottom',
    items: [
            {
                title: 'Home',
                iconCls: 'home',
                html: 'Home Screen'
            },
            {
                title: 'Contact',
                iconCls: 'user',
                html: 'Contact Screen'
            }
        ]       
});


function onLoad() {
    Ext.create("Ext.Panel", {
        fullscreen : true,
        layout : 'card',
        items : [ mainPanel,contentPanel, statisticsPanel ]
    }).setActiveItem(0);
}

Ext.application({
    name : 'Sencha',
    launch : function() {
        onLoad();
    }
});

Answer 1

我相信您需要实例化 TabPanel 而不是 Panel，如下所示：

Ext.create("Ext.TabPanel", {
    fullscreen : true,
    items : [ mainPanel,contentPanel, statisticsPanel ]
}).setActiveItem(0);