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

在我的应用程序的主布局中将有三个主面板，两个带有动态内容的常规面板和一个选项卡面板。 选项卡面板不属于卡片布局的一部分，工作正常，但当我执行类似操作时，选项卡面板会断开（选项卡未切换，并且忽略“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();
    }
});

mainPanel=Ext.create（“Ext.Panel”{
iconCls:'信息'，
标题：“信息”，
html:“这是信息面板”
});
contentPanel=Ext.create（“Ext.Panel”{
iconCls：“更多”，
标题：“关于我们”，
html:“这是关于面板的”
});
统计面板=Ext.create（“Ext.tab.Panel”{
tabBarPosition:'底部'，
项目：[
{
标题:"家",，
iconCls:“家”，
html:“主屏幕”
},
{
标题：“联系人”，
iconCls:'用户'，
html:“联系人屏幕”
}
]       
});
函数onLoad（）{
Ext.create（“Ext.Panel”{
全屏：对，
布局：“卡片”，
项目：[主面板、内容面板、统计面板]
}).setActiveItem（0）；
}
外部应用程序({
名称:"Sencha",，
启动：函数（）{
onLoad（）；
}
});

---

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

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