Question

Ext.define('SenchaCalc.view.TabScreen',{
extend: 'Ext.tab.Panel',
xtype: 'tabScreen',
requires: [
    'Ext.tab.Panel',
],
config:{



        xtype:'tabpanel',   
        ui: 'light',
        itemId: 'tabPanel',
        name: 'tabPanel',
        layout: 
        {
            animation: 'fade',
            type: 'card'
        },

        items:[
        {
            title: 'HOME',
            iconCls: 'home',
            itemId:'home',


            items:[{
                    xtype:'panel',
                    itemId:'homePanel',
                    height:450,
                    width:1010,
                    items:[{

                                xtype:'button',
                                itemId:'homePanelButton',
                                name:'homePanelButton',
                                html:'I m in Home Panel',
                                height:50,
                                width:350,
                                style:'border:0px;background:#1985D0;',
                                cls:'homePanelButton',

                    }]
                        }]

                }]
        },
        {
            title: 'HELP',
            iconCls: 'action',
            itemId:'help',
            items:[{
                    xtype:'panel',
                    itemId:'helpPanel',
                    height:450,
                    width:1010,
                    items:[{

                                xtype:'button',
                                itemId:'helpPanelButton',
                                name:'helpPanelButton',
                                html:'I m in Help Panel',
                                height:50,
                                width:350,
                                style:'border:0px;background:#1985D0;',
                                cls:'helpPanelButton',

                    }]

                }]
        }],

}
});



   /******************************************************************************/


Ext.define('SenchaCalc.view.MainScreen',{
extend: 'Ext.Panel',
xtype: 'mainScreen',
requires: [
    'Ext.tab.Panel',
],
config:{

        xtype: 'panel',

    items:[
        xtype: 'tabScreen',
            ]

}
});

Answer 1

如何在MainScreen中处理面板和屏幕截图之间的导航？如果您有任何控制器粘贴代码。你没有在那里提到任何布局。如果您想在不同的屏幕中显示它们，请使用MainScreen的卡片布局。为了测试面板内的嵌套tabpanel，我使用了vbox布局并在此处粘贴了代码。请在sencha jsfiddle上运行此测试。

Ext.application({
name: 'Sencha',

launch: function() {
    Ext.create("Ext.Panel", {
        fullscreen: true,
        xtype: 'mainScreen',
        layout: {
            type: 'vbox'
        },
        requires: [
            'Ext.tab.Panel',
        ],
         items:[
            {
                xtype: 'panel',
                flex:1,
                style: 'background:red',
                html:'Main screen data'
            },
            {
                xtype: 'tabpanel',flex:1,
                tabBarPosition: 'bottom',

                defaults: {
                    styleHtmlContent: true
                },

                items: [
                    {
                        title: 'Page1',
                        iconCls: 'home',
                        html: 'Panel screen data page1'
                    },
                    {
                        title: 'Page2',
                        iconCls: 'user',
                        html: 'Panel screen data page2'
                    }
                ]
            }

         ]

        });
  }

}）;

Sencha touch - 如何在面板中添加标签面板？以下答案不起作用它不显示选项卡面板内的内容

1 个答案: