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);

Sencha Touch中的标签面板和卡片布局

1 个答案: