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

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

i trying add together tabpanel item in panel not work expected.

i have defined tabpanel separate view 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 main view trying add together tabpanel within 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 >> 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 mainpage rendered,the tab bar not appeared in bottom , leave hollow space in bottom.

is there issue configuration? improve ideas on how accomplish part? in application, there 7-8 views , have same tabbar in bottom.

thanks.

you seem trying set titlebar, height 100% list, , tabpanel 1 fullscreen component. titlebar fine i'm sure (if docked toolbar), list trying take height , leaving none tabpanel. remember tabpanel not tabbar, it's both. if want bottom bar command main views hen set list 1 of tabpanel items.

extjs sencha-touch sencha-touch-2