jamaljohnson
2 May 2007, 3:50 PM
i'm trying to build a basic layout, but in the center region i need to be able to add stackable content panes (instead of adding panes and having tabs show up). so basically, the user can click a button to switch to a different 'content panel' in the center. it used to be setup with iframes (not using Ext) and i'd simply hide / show the proper iframes the user wants to navigate to. so this is what i have:
this.layout = new Ext.BorderLayout(document.body, {
north: {
split:false,
initialSize: 25
},
west: {
split: true,
initialSize: 160,
titlebar: false,
collapsible: false,
minSize: 160,
maxSize: 200
},
center: {
autoScroll: true,
alwaysShowTabs: false
}
});
this.layout.beginUpdate();
var centerPane = new Ext.ContentPanel('mainArea', {fitToFrame:true, closable: false});
this.layout.add('north', new Ext.ContentPanel('pageTitle', {fitToFrame:true}));
this.layout.add('west', new Ext.ContentPanel('navigation', {fitToFrame:true, closable:false}));
this.layout.add('center', centerPane );
this.layout.endUpdate();
and....
<body>
<div id="pageTitle" class="x-unselectable x-layout-panel-hd x-layout-title-center"><span id="default-title">here is a title</span></div>
<div id="navigation"> </div>
<div id="mainArea" style="background:yellow"> </div>
</body>
does anyone have any suggestions as to how i might add multiple 'stacked' content panels to the center area that i can hide and show accordingly? basically only ONE content panel will be 'display:block' or visible at a time. thanks!
this.layout = new Ext.BorderLayout(document.body, {
north: {
split:false,
initialSize: 25
},
west: {
split: true,
initialSize: 160,
titlebar: false,
collapsible: false,
minSize: 160,
maxSize: 200
},
center: {
autoScroll: true,
alwaysShowTabs: false
}
});
this.layout.beginUpdate();
var centerPane = new Ext.ContentPanel('mainArea', {fitToFrame:true, closable: false});
this.layout.add('north', new Ext.ContentPanel('pageTitle', {fitToFrame:true}));
this.layout.add('west', new Ext.ContentPanel('navigation', {fitToFrame:true, closable:false}));
this.layout.add('center', centerPane );
this.layout.endUpdate();
and....
<body>
<div id="pageTitle" class="x-unselectable x-layout-panel-hd x-layout-title-center"><span id="default-title">here is a title</span></div>
<div id="navigation"> </div>
<div id="mainArea" style="background:yellow"> </div>
</body>
does anyone have any suggestions as to how i might add multiple 'stacked' content panels to the center area that i can hide and show accordingly? basically only ONE content panel will be 'display:block' or visible at a time. thanks!