PDA

View Full Version : Where did the toolbar go?!


steve.neill
16 Jul 2007, 10:01 AM
A few days ago I posted a thread reporting a potential bug (http://extjs.com/forum/showthread.php?t=9287). I'm convinced this is indeed a bug and I created a test-case to prove it.

Before the 'debugger' statement (best to run this in Firefox with Firebug installed), you'll see a tab with its toolbar. Then once a NestedLayoutPanel gets added to the layout region within the tab, the toolbar vanishes!

So why won't the UI respect the fact the layout region within the tab has a toolbar and compensate for it when the NestedLayoutPanel gets added?!

Any ideas anyone?

Thanks,

Steve



<html>
<head>
<link rel="stylesheet" type="text/css" href="ext-1.0.1a/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext-1.0.1a/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="ext-1.0.1a/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="ext-1.0.1a/ext-all-debug.js"></script>
<script language="javascript">
function test() {
var tabPanel = new Ext.TabPanel(window.document.getElementById("tab"));
var tab = tabPanel.addTab("id", "title");
var toolbar = new Ext.Toolbar(tabPanel.bodyEl);
toolbar.addButton({
cls: 'x-btn-text-icon'
, text: "button"
});

var layout = new Ext.BorderLayout(tabPanel.bodyEl, { center: { toolbar: toolbar } });
var wsDom = Ext.DomHelper.append(layout.getRegion('center').bodyEl, { tag: 'div' });
var wsLayout = { center: {} };
var wsBorderLayout = new Ext.BorderLayout(wsDom, wsLayout);
var wsLayoutPanel = new Ext.NestedLayoutPanel(wsBorderLayout);

// after this point you'll see the toolbar vanish...
debugger;
layout.getRegion('center').add(wsLayoutPanel);
}
</script>
</head>
<body onload="test()">
<div id="tab"></div>
</body>
</html>
jack.slocum
16 Jul 2007, 12:37 PM
Your code is nothing like you will see in any of the Ext examples. There's a reason for that, it won't work. Take a look at the examples included in the download and follow the way they are building layouts and I imagine your code will start working as one would expect.

The reason your toolbar gets hidden:

If you place absolute positioned border layout panels into a div with static positioned elements (like a static toolbar), they will cover them. That's just how absolute positioning works.
steve.neill
16 Jul 2007, 2:16 PM
Jack,

I guess I'm a little confused then...


If you place absolute positioned border layout panels into a div with static positioned elements (like a static toolbar), they will cover them. That's just how absolute positioning works.

I looked at the DOM hierarchy in Firebug and determined the following from the code example:


body
|__ x-tabs-top
|__ x-tabs-wrap
|__ x-tabs-body x-layout-container (position: relative)
|__ x-toolbar x-small-editor
|__ x-layout-panel x-layout-panel-center
|__ x-layout-panel-body
|__ x-layout-container x-layout-nested-layout (position:relative)
|__ x-layout-panel x-layout-panel-center
|__ x-layout-panel-body


I'm just not seeing it. Is there a specific example you can point me to?

Thanks,

Steve
tryanDLS
17 Jul 2007, 7:00 AM
Take a look at the complex layout example. There's also discussion of layouts in the Layout tutorial. There are also forum posts regarding putting a toolbar in layout panel and having it remain fixed while the panel content scrolls (try searching for resizeEl and contentpanel)