PDA

View Full Version : Toolbar will not render after layout created



chdavi
25 Apr 2007, 6:06 AM
I am trying to create a toolbar after I build my layout. However, if I create the toolbar after I update the layout, the toolbar never renders. If I move the toolbar block above the update it shows up fine.

The odd thing is, I checked it in Firebug, and it looks like it is copying the toolbar div to be a child of the body tag, instead of updating the first div.

(style background-color: green was added to show the correct div)

Firebug results:

<body id="ext-gen6" class="ext-gecko ext-strict x-layout-container">
<div id="toolbar">
<div class="x-toolbar x-small-editor">
<table cellspacing="0">
<tbody>
<tr>
<td>
<table id="ext-gen32" class="x-btn-wrap x-btn" cellspacing="0" cellpadding="0" border="0" style="width: auto;">
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="ext-gen7" class="x-layout-panel x-layout-panel-north" style="left: 0px; top: 0px; width: 1140px; height: 20px;">
<div id="ext-gen8" class="x-unselectable x-layout-panel-hd x-layout-title-north" unselectable="on" style="display: none;">
</div>
<div id="ext-gen14" class="x-layout-panel-body" style="overflow: hidden; height: 20px;">
<div id="header" class="x-layout-active-content" style="width: 1140px; height: 20px;">
<div id="toolbar" style="background-color: green;">tb here</div>
</div>
</div>
</div>

Index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tracker</title>
<link rel="stylesheet" type="text/css" href="lib/js/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="lib/js/ext/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="lib/js/ext/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="lib/js/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="fitrack.js"></script>

</head>
<body>
<div id='header'>
<div id='toolbar' style='background-color: green'>tb here</div>
</div>
<div id='content'></div>
<div id='footer'>footer</div>
<div id='toolbar'></div>
</body>
</html>

Fitrack.js

MainLayout = function(){
return{
init: function(){
layout = new Ext.BorderLayout(document.body,{
north : {
split: false
, initalSize: 50
}
, south: {
split: false
, initalSize: 20
}
, center: {
autoScroll: true
}
});
layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('header', {fitToFrame: true}));
layout.add('south', new Ext.ContentPanel('footer', {fitToFrame: true}));
layout.add('center', new Ext.ContentPanel('content'));
layout.endUpdate();

var menu = new Ext.menu.Menu({
id: 'MainMenu'
, items: [
new Ext.menu.CheckItem({
text: 'I like ext'
, checked: false
})
]
});

var tb = new Ext.Toolbar('toolbar');
tb.addButton({
text: 'Menu'
, menu: menu
});
}
};
}();


Ext.onReady(MainLayout.init);

If I move the layout update block to below the toolbar generation, It still duplicates the toolbar div to under the body, but it also updates the correct div with the toolbar.


<body id="ext-gen6" class="ext-gecko ext-strict x-layout-container">
<div id="toolbar"/>
<div id="ext-gen7" class="x-layout-panel x-layout-panel-north" style="left: 0px; top: 0px; width: 1140px; height: 27px;">
<div id="ext-gen8" class="x-unselectable x-layout-panel-hd x-layout-title-north" unselectable="on" style="display: none;">
<span class="x-unselectable x-layout-panel-hd-text" unselectable="on"/>
<div id="ext-gen9" class="x-unselectable x-layout-panel-hd-tools" unselectable="on">
<div id="ext-gen10" class="x-layout-tools-button" style="display: none;">
<div class="x-layout-tools-button-inner x-layout-close"/>
</div>
</div>
</div>
<div id="ext-gen14" class="x-layout-panel-body" style="overflow: hidden; height: 27px;">
<div id="header" class="x-layout-active-content" style="width: 1140px; height: 27px;">
<div id="toolbar" style="background-color: green;">
<div class="x-toolbar x-small-editor">
<table cellspacing="0">
<tbody>
<tr>
<td>
<table id="ext-gen32" class="x-btn-wrap x-btn" cellspacing="0" cellpadding="0" border="0" style="width: auto;">
<tbody>
<tr id="ext-gen34" class="x-btn-with-menu">
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>

Is there a way to create a toolbar in a layout dynamically that I am missing? I want to be able to create a toolbar on the fly when a user changes sections in the application.

Nullity
25 Apr 2007, 6:42 AM
I am also having an issue which seems related. I am creating a dialog containing 2 tabs. One tab just has random info, while the second contains a grid. The grid will only render if it is created before my tab layout, and I get no errors if it is not rendered. This seems completely backwards to me. My problem was also compounded by the fact that I'm retrieving data for the grid using ajax, so I had to come up with a way to stall the tabs from rendering until the grid was finished. This was very convoluted, and undesired.

I will point out that I am creating the dialog with an iframe as the body, this way I can source a php file. chdavi, are you also using an iframe?

chdavi
25 Apr 2007, 10:55 AM
Nope, I am not using an Iframe, just a standard div. But I think I figured it out.

Ext wasn't duplicating it like I thought, I have a bug in my html with a 2nd toolbar div from where I was trying to figure out the odd behavior. Once I removed that, I no longer see the toolbar as a child of the body tag. However, it still was not showing up, even though firebug showed the toolbar being created. I tracked it down and it looks like the height of the container div was an issue. If I change the toolbar div to be:


<div id='toolbar' style="height: 27px;">&nbsp;</div>

Then it renders correctly.

I am not sure why it renders correctly if you create it before the layout, but it looks like there is at least a work around.