Sencha Touch 2 : Not able to add the tabpanel as an item in the panel

Question

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.

Answer 1

You seem to be trying to put a titlebar, height 100% list, and tabpanel into one fullscreen component. The titlebar is fine I'm sure (if it is a docked toolbar), but your list is trying to take up all the height and leaving none for the tabpanel. Remember a tabpanel is not a tabbar, it's both. If you want the bottom bar to control all the main views hen set your list as one of the tabpanel items.