PDA

View Full Version : BoderLayout.west:Collapsing into wrong direction!



mabra
29 Aug 2009, 5:19 AM
Hi All !

I create my borderlayout in code and add nothing but the regions. Then, I add panels by code, all before rendering and this worked fine for me in the beginning. Now, I added a panel to my collapsible west region and - astoundingly - west 'collapses' vertically, than horizontally! The height of the content shrinks, but not the west width.

I cannot find, what I possibly do wrong. I played around with the regions layout, without success. I searched the forums and consulted the docs, without finding the right hint.

So, I am here, to ask for help!

My code is this:


Ext.onReady(function()
{
var viewport = new Ext.Viewport({
id: 'simsViewport',
layout: "border",
forceLayout: true,
items:
[
{
id: 'simsTopLayout',
split: true,
region: 'north',
height: 50
},
{
id: 'simsNavLayout',
split: true,
region: 'west',
width: 220,
minWidth: 0,
maxWidth: 320,
collapsible: true
},
{
id: 'simsContLayout',
split: true,
region: 'center',
layout: 'fit',
html: 'The script is in the html!!'
},
{
id: 'simsStateLayout',
split: true,
region: 'south',
height: 60
},
{
id: 'simsEastLayout',
split: true,
region: 'east',
width: 220,
minWidth: 0,
maxWidth: 320,
collapsible: true
}
]
});

var nav = Ext.getCmp('simsNavLayout');

var navPanel = nav.add({
id: 'idSimsNavPanel',
xtype: 'panel',
region: 'west',
layout: 'fit',
header: true,
title: 'west',
collapsed: false,
collapsible: true,
hideCollapseTool: false,
html: 'Navigation; Collapsing happens to the wrong direction'
});

viewport.doLayout();
});

Just to be sure, I have a online version here:
http://www.manfbraun.de/cont/tech/probs/TestLayout1.htm

It would be great, to get a hint!

Thanks so far!

br--mabra

Condor
29 Aug 2009, 5:26 AM
Overnesting. The navPanel shoudn't be added the the west region, it should BE the west region.

(or if you want to keep it this way, at least move the title and layout config options from the navPanel to the west region)

mabra
29 Aug 2009, 6:41 AM
Hi !

Many thanks for your reply!!!

From several forum threads, I believed, it cannot be created by code, so I used add! This seems - from your answer - to have appended another container!?

I reverted my creation-order, to this:



var panNorth = new Ext.Panel({...});
var panWest = new Ext.Panel({...});
var panCenter = new Ext.Panel({...});
and then:


var viewport = new Ext.Viewport({
id: 'simsViewport',
layout: "border",
items:[ panNorth, panWest, panCenter]
});
viewport.doLayout();
This works good for me!!!

But allow me one question:The way, I've done it originally, added this my container [panel] to an auto-created container [panel] ??? I've thought, my orignal way adds a layout which needs to have a container added!!??!


Anyway, much thanks!

br--mabra

Condor
29 Aug 2009, 6:51 AM
But allow me one question:The way, I've done it originally, added this my container [panel] to an auto-created container [panel] ??? I've thought, my orignal way adds a layout which needs to have a container added!!??!

Any item that is specified as {...} (without an xtype to specify what component it is supposed to be) is created as the defaultType of the container (most containers have defaultType:'panel').

mabra
29 Aug 2009, 11:58 AM
Hi !

Much thanks for this!!

br--mabra