[HOWTO] Toolbar in nested layout panel.

[MaximGB]

1. Use following dom struct.

<div id="layout-container">
<div id="panel-toolbar"></div>
<div id="west-panel"></div>
<div id="center-panel"></div>
</div>


2. Create a toolbar and add some buttons.

var tb = new Ext.Toolbar('panel-toolbar');
....


3. Get toolbar height.

var tb_height = tb.getEl().getHeight();


4. Create a border layout with region margins adjusted according to toolbar height.

var layout = new Ext.BorderLayout(
'layout-container',
{
west: {
margins: {top: tb_height, left: 0, right: 0, bottom: 0},
cmargins: {top: tb_height, left: 0, right: 0, bottom: 0},
....
},
center: {
margins: {top: tb_height, left: 0, right: 0, bottom: 0},
cmargins: {top: tb_height, left: 0, right: 0, bottom: 0},
....
}
}
);


5. Create a NestedLayoutPanel with panel size adjustments according to toolbar height.

var panel = new Ext.NestedLayoutPanel(
layout,
{
adjustments: [0, tb_height],
fitToFrame: true,
toolbar: tb
....
}
);


That's all.

[atdc12]

Works like magic :) Thx