View Full Version : Question of using a ToolBar in NestedLayout

2 Feb 2007, 6:17 PM
Here is the problem I met. Please tell me if this is a bug of YUI-ext 0.4.

I am creating a page using NestedLayoutPanel. The test page is http://www.yr-tech.com:8025/test.php. The layout is a little bit complicated right here.

Basically, I used 2 NestedLayoutPanels in the page. The first NestedLayoutPanel drives the layout which has a south and a center region showing in the middle. I have a 2 panels stacking in the center region which is driven by the first NestedLayoutPanel. The second NestedLayoutPanel was used to drive a center and an east region only for the test tab.

Now, what I want to get is to have a toolbar on top of the second NestedLayoutPanel. In another word, the toolbar will be located on top of the Test tab page crossing the center and east regions of the 2nd NestedLayoutPanel. My code is


var testLayout = new YAHOO.ext.BorderLayout('testcont', {
east: {
initialSize: 300,
center: {

var tabtb=new YAHOO.ext.Toolbar("test-tb");
tabtb.addButton({id:"fbtn_1",text:'Files',tooltip:'Files',className:'view-tab btn_files',click:this.Files.createDelegate(this)});
tabtb.addButton({id:"cbtn_1",text:'Contacts',tooltip:'Contacts',className:'view-tab btn_contacts',click:this.Close.createDelegate(this)});
tabtb.addButton({id:"rbtn_1",text:'Calendar',tooltip:'Calendar',className:'view-tab btn_calendar',click:this.Close.createDelegate(this)});
tabtb.addButton({id:"ubtn_1",text:'Updates',tooltip:'Updates',className:'view-tab btn_updates',click:this.Close.createDelegate(this)});
tabtb.addButton({id:"gbtn_1",text:'Gantt',tooltip:'Gantt',className:'view-tab btn_gantt',click:this.Close.createDelegate(this)});
tabtb.addButton({id:"tbtn_1",text:'Client Gantt',tooltip:'Client Gantt',className:'view-tab btn_cligantt',click:this.Close.createDelegate(this)});

testLayout.add('east', new YAHOO.ext.ContentPanel('inner3'));
testLayout.add('center', new YAHOO.ext.ContentPanel('main-bd',{fitToFrame:true}));
var test1=innerLayout.add('center', new YAHOO.ext.NestedLayoutPanel(testLayout,{title:'test',toolbar:tabtb,fitToFrame:true}));


<div id="testcont" class="ylayout-inactive-content">
<div id="test-tb"></div>
<div id="inner3" class="ylayout-inactive-content"></div>
<div id="main-bd" class="ylayout-inactive-content">
<iframe style="border:solid 0px; width:100%;height:100%;" src="http://www.ajaxian.com/"></iframe>

The 2 NestedLayout are working properly, but the toolbar is missing. Actually, when I uses Firebug to inspect the "test-tb", I found it is overlapped by the 2nd NestedLayoutPanel. It's not showing because it's covered by the NestedLayoutPanel. This is what I get in the Firebug

<div id="testcont" class="ylayout-container ylayout-nested-layout ylayout-active-content yui-ext-tabitembody" style="display: block; position: relative; visibility: visible; width: 1523px; height: 231px;">
<div id="test-tb" style="width: 1523px;">
<div class="ytoolbar">
<table cellspacing="0" cellpadding="0" border="0">
<div id="elgen-74" class="ylayout-panel ylayout-panel-east" style="left: 1224px; visibility: visible; width: 298px; top: 0px; height: 231px;">
<div id="elgen-75" class="yunselectable ylayout-panel-hd ylayout-title-east" unselectable="on" style="display: none;">
<div id="elgen-78" class="ylayout-panel-body" style="overflow: auto; height: 231px; width: 298px;">
<div id="elgen-79" class="ylayout-panel ylayout-panel-center" style="left: 0px; top: 0px; width: 1224px; height: 230px;">

See the styles in div id elgen-74 and elgen-79, their top positions are set to 0px. That's why they are covering the toolbar.

When I move the <div id="test-tb"> into the <div id="main-bd">, you will see the pages like http://www.yr-tech.com:8025/test1.php. This toolbar is only on top of the center region, but this is not what I want. I want the toolbar crosses the center iframe area and also the east region area in the NestedLayoutPanel.

I am not sure if this is a bug of using Toolbar in a NestedLayoutPanel, or I have something wrong in my code. Please help me...

Thanks a lot