PDA

View Full Version : BorderLayout on Tab - ContentPanel not displaying


PFM
10 May 2007, 5:22 PM
I am having problems getting a borderlayout with 'west' and 'center' contentpanels to display on a tab. When displaying DIV tags in firebug, the 'west' and 'center' have a height of 0px, but when I resize the firebug frame the height values get set and are displayed. See attachments. Does anyone know what I am doing wrong? I have search a lot on the forum but have not found a solution yet.

My HTML


<body>

<div id="feedtreetabs">
<div id="feedtreetab" class="tab-content">
<div id="feed-tree-grid-panel" style="width:800px;height:400px;">
<div id="feed-tree-editor-grid"></div>
</div>
</div>
<div id="feedtreenodetab" class="tab-content">
<div id="the-layout">
<div id="west" class="x-layout-inactive-content">
<div id="feed-tree-node-tb"></div> <!-- toolbar -->
<div id="feed-tree-node-tree"></div> <!-- tree -->
</div>
<div id="center" class="x-layout-inactive-content">
<div id="attributes">
<div id="feed-tree-node-leaf-form" style="visibility: hidden;position:relative;top:0;left:0;offsetTop:0"></div>
<div id="feed-tree-node-folder-form" style="visibility: hidden;position:relative;top:0;left:0;offsetTop:0"></div>
</div>
</div>
</div>
</div>
<div id="feedtreepaneltab" class="tab-content">
<div id="feed-tree-panel-grid-panel" style="width:800px;height:400px;">
<div id="feed-tree-panel-editor-grid"></div>
</div>
</div>
<div id="feedtreesortertab" class="tab-content">
<div id="feed-tree-sorter-grid-panel" style="width:800px;height:400px;">
<div id="feed-tree-sorter-editor-grid"></div>
</div>
</div>
<div id="feedtreecssclasstab" class="tab-content">
<div id="feed-tree-css-class-grid-panel" style="width:800px;height:400px;">
<div id="feed-tree-css-class-editor-grid"></div>
</div>
</div>
</div>
</body>


JS code


var feedTreeNodeBorderLayout = new Ext.BorderLayout(Ext.get('the-layout'), {
west: {
initialSize:200,
split:true,
titlebar:true,
minSize: 100,
maxSize: 400,
collapsed: false
},
center: {
initialSize:200,
titlebar:true,
autoScroll:true,
collapsed: false
}
});
...

feedTreeNodeBorderLayout.beginUpdate();
feedTreeNodeBorderLayout.add('west', new Ext.ContentPanel('west', {
title:'Tree Nodes',
fitToFrame:true,
autoScroll:true,
toolbar: feedTreeNodeToolbar,
resizeEl: 'feed-tree-node-tree'
}));

feedTreeNodeBorderLayout.add('center', new Ext.ContentPanel('center', {
title:'Attributes',
autoScroll:true,
resizeEl: 'attributes',
fitToFrame:true
}));

feedTreeNodeBorderLayout.restoreState();
feedTreeNodeBorderLayout.endUpdate();
xyun
23 Jun 2007, 7:37 PM
I have the same problem.
Who can help?
PFM
24 Jun 2007, 4:11 AM
xjun,

What fixed my issue was setting a height. see http://extjs.com/learn/Tutorial:Using_Layouts_with_Ext_-_Part_1


An important note for Internet Explorer: The element that will contain your BorderLayout must have size in order for it to render properly. This typically isn't a problem if you're writing an application that uses the document.body since document.body always has size (well mostly anyway - if it didn't we wouldn't see anything in the browser.) But if you're using layout management within containers on an existing web page (perhaps in a DIV) you'll need to give that DIV size in order for the layout to render. Something like this works fine: