javascript - Nested Panels / Toolbars in Sencha Touch -


i'm trying create constant bottom toolbar, controls panel above it. panel above should have toolbar of own (at top). i've attempted below code, works, can't see html of sub-page inner panels. think it's because panel isn't taking remaining height, don't know why.

anyone have ideas? thanks!

ext.setup({     onready: function() {       // sub-page sections     var blah = {         style: "background-color: #b22222; color:#ff0000;",         title: "one",         html: "why can't see html",         layout:"fit",         flex: 1     };     var blah2 = {         style: "background-color: #404040; color:#000000;",         title: "one",         html: "why can't see html",         layout:"fit",         flex: 1     };        // main portion of page, includes top toolbar , content     var page1 = new ext.tabpanel({         dock: "bottom",         layout: "card",         items: [blah, blah2, blah],         title: "one",         flex: 1     });      // outer panel bottom toolbar     var wrapper = new ext.panel({         fullscreen: true,         items: page1,         dockeditems: [           {             xtype: "toolbar",             dock: "bottom",             items: [               {                 iconmask: true,                 iconcls: "download"               },               {                 iconmask: true,                 iconcls: "favorites"               },               {                 iconmask: true,                 iconcls: "search"               },               {                 iconmask: true,                 iconcls: "user"               }             ]             }         ]       });     } }); 

it sounds trying can done using tabpanel, rather toolbar. when dock tabbar bottom, each tabbutton can accept icon.

i may have misunderstood trying do, should help:

ext.setup({     onready: function() {           // sub-page sections         var blah = {             style: "background-color: #b22222; color:#ff0000;",             title: "one",             html: "why can't see html",         };         var blah2 = {             style: "background-color: #404040; color:#000000;",             title: "one",             html: "why can't see html",         };            // main portion of page, includes top toolbar , content         var page1 = new ext.tabpanel({             items: [blah, blah2, blah],             title: "one",             iconmask: true,             iconcls: "download",         });          // outer panel bottom toolbar         var wrapper = new ext.tabpanel({             fullscreen: true,             tabbar: {                 dock: 'bottom',                 layout: {                     pack: 'center'                 }             },             items: [                 page1,                 {                     iconmask: true,                     iconcls: "favorites"                 },                 {                     iconmask: true,                     iconcls: "search"                 },                 {                     iconmask: true,                     iconcls: "user"                 }             ]         });     } }); 

i made screencast building user interface in sencha touch using tabs , toolbars. there's live demo, , code on github, feel free use reference.


Comments

Popular posts from this blog

php - What is the difference between $_SERVER['PATH_INFO'] and $_SERVER['ORIG_PATH_INFO']? -

fortran - Function return type mismatch -

queue - mq_receive: message too long -