[1.1.1] Nested layout problem [Archive]

Agnus

8 Oct 2007, 4:57 AM

Hello, I think I have found a bug with nested layouts.

1) I create a main layout with 2 regions (north, center)
2) I add a nested layout with 2 regions (north, center)
3) I add a nested layout with 2 regions (center, south)

The 3rd layout will not display the south region, unless I resize the browser window. Check it out:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>

<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
<script type="text/javascript">

// main function
// -------------

var init = function() {
var layout = new Ext.BorderLayout(document.body, {
north: {initialSize: 25},
center: {autoScroll: true, tabPosition: 'top', alwaysShowTabs: true}
});

layout.beginUpdate();
layout.add("north", new Ext.ContentPanel(Ext.id(), {autoCreate: true}));
layout.add("center", new FooPanel(Ext.id(), {autoCreate: true, fitToFrame: true, title: 'FooPanel'}));
layout.endUpdate();
}
Ext.onReady(init);

// first nested panel
// ------------------

var FooPanel = function(id, config) {
FooPanel.superclass.constructor.call(this, id, config);

var layout = new Ext.BorderLayout(this.el, {
north: {initialSize: 25},
center: {autoScroll: true, tabPosition: 'top', alwaysShowTabs: true}
});

layout.beginUpdate();
layout.add('north', new Ext.ContentPanel(Ext.id(), {autoCreate: true}));
layout.add('center', new BarPanel(Ext.id(), {autoCreate: true, fitToFrame: true, title: 'BarPanel'}));
layout.endUpdate();
}
Ext.extend(FooPanel, Ext.ContentPanel);

// second nested panel
// -------------------

var BarPanel = function(id, config) {
BarPanel.superclass.constructor.call(this, id, config);

var layout = new Ext.BorderLayout(this.el, {
center: {autoScroll: true},
south: {split: true, autoScroll: true, initialSize: 50}
});

layout.beginUpdate();
layout.add('center', new Ext.ContentPanel(Ext.id(), {autoCreate: true}));
layout.add('south', new Ext.ContentPanel(Ext.id(), {autoCreate: true}));
layout.endUpdate();
}
Ext.extend(BarPanel, Ext.ContentPanel);

</script>
</head>
<body></body>
</html>

mystix

8 Oct 2007, 6:32 AM

i doubt this is a bug.

IIRC (correct me if i'm wrong) you'll need to use NestedLayoutPanels in order to invoke auto layout resizing (normal ContentPanels can't contain layouts). i.e. you'll need to rewrite your code to make use of NestedLayoutPanels instead.

note: creating a NestedLayoutPanel requires a BorderLayout, whose constructor requires an existing HTMLElement/Ext.Element container to render into. you'll need to create the BorderLayout's container element first before you can add it to a NestedLayoutPanel.