PDA

View Full Version : Border Layout - Component Behaviour



Jack9
26 Aug 2009, 12:59 PM
I have an issue where the collapsed bar of the north panel shortens width when collapsed, then expands strangely over the existing panels and then corrects itself. Is this normal?


Ext.onReady(function(){
var topPanel = new Ext.Panel({
title: 'NorthPanel'
,region:'north'
,height: 275 // THIS IS FIXED
,frame:true
,split:true
,autoScroll: true
,collapsible: true
,layoutConfig:{
animate:true
}
});

var westPanel = new Ext.grid.GridPanel({
title: 'WestPanel'
,region:'west'
,layout:'fit'
,frame:true
,split:true
,minSize:150
,maxSize:300
,collapsible: true
,store: [['0','']] // dummy
,columns: [
{
id: 'id'
,header:'ID'
,tooltip: 'ID'
,dataIndex: 'id'
,width: 50
,align: 'center'
}
,{
header: "Name"
,dataIndex: 'name'
,width: 130
}
]
,tbar: new Ext.Toolbar({
height: 25
})
,layoutConfig:{
animate:true
}
});

var centerPanel = new Ext.Panel({
region:'center'
,title: 'CenterPanel'
,layout:'fit'
,frame:true
,split:true
,collapsible: true // this matches top bars (collapse icons enlarge bar slightly)
,layoutConfig:{
animate:true
}
});

var container = new Ext.Container({
layout:'border'
,width:697 // fixed width for entire app
,height:600 // fixed height for entire app
,items: [
topPanel
,westPanel
,centerPanel
]
});
container.doLayout();
container.render('testDiv');
});

steffenk
26 Aug 2009, 1:17 PM
yes, that's normal behaviour.

Jack9
26 Aug 2009, 1:53 PM
The attribute to fix collapsed width to align with other components:

cmargins: '0 0 5 0' // or whatever you need.

Ty for confirming he behavior.