0

I am trying to add a tabpanel as an item in the panel but it does not work as expected.

I have defined tabpanel as a separate view as below.

Ext.define("WU.view.WUTabPanel", {
    extend: "Ext.tab.Panel",
    alias: "widget.wuTabPanel",
    config: {
             tabBar: {
                    docked: 'bottom'
                },
                 items: [

                    {
                      title: 'Home',
                      iconCls: 'home',
                      html: 'Home Screen',
                    },
                    {
                        title: 'Send Money',
                        iconCls: 'favorites',
                        html: 'Contact Screen',

                    }
                    ]

        },

});

This is my main view where I am trying to add the tabPanel inside the Panel.

Ext.define('WU.view.WUHomePage', {
    extend : 'Ext.Panel',
    requires : [ 'Ext.Toolbar', 'Ext.TitleBar', 'Ext.dataview.List', 'Ext.Ajax', 'Ext.data.proxy.Ajax' ],
    xtype : 'homePage',
    alias : 'widget.wuHomePageView',

    config : {
        fullscreen : true,
        title : 'MainMenu',
        // iconCls : 'mainMenuhome',
        disabledCls : 'mainMenuhome',
        items : [
                {
                    xtype : 'titlebar',
                    title:'Main Menu',
                    items : [ {
                        text : 'Back',
                        ui:'back',
                        id : 'homePageBack',
                        align : 'left',
                        handler : function(btn) {
                            console.log('HomePaga  >> Back to Login');
                            this.up('homePage').fireEvent('backButtonCommand', this,'homePage');
                        }
                    } ]
                },
                {
                    xtype : 'list',
                    id : 'mainList',
                    title : 'Sample',
                    height : '100%',
                },
                    itemTpl : '<div class = mainList>'
                             '<div class = listArrowImage><img class= mArrowImage src={arrow}></img></div>'
                        </div>',

                }, 
                {
                    xtype: 'wuTabPanel',
                }, 
                ],

    },
});

When the mainPage is rendered,the tab bar is not appeared in the bottom and leave the hollow space in the bottom.

Is there any issue with the configuration? Any better ideas on how to achieve this part? In my application, there are 7-8 views and all have same tabbar in the bottom.

Thanks.

4

1 回答 1

1

您似乎试图将标题栏、高度 100% 列表和选项卡面板放入一个全屏组件中。我确定标题栏很好（如果它是停靠的工具栏），但您的列表试图占据所有高度，并且没有为选项卡面板留下任何高度。请记住，选项卡面板不是选项卡栏，两者兼而有之。如果您希望底部栏控制所有主要视图，请将您的列表设置为选项卡面板项目之一。

于 2013-02-21T05:15:41.113 回答