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
Post a Comment