PDA

View Full Version : SOLVED: Border layout resize panels when scrollbar appear



mrsunshine
28 Aug 2009, 7:44 AM
I have following problem:

i have a border layout. region west (autoScroll=true) contains a couple of collapsible panels.
if the scrollbar appears the panels do not resize, so parts of the panels are hidden.

i played around a lot, search for a while but found no solution.
But i am sure it's only thing i miss.

Here is a code example which produce my problem.


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ExtJS </title>
<link rel="stylesheet" type="text/css" href="src30/resources/css/ext-all.css" />
<script type="text/javascript" src="src30/adapter/ext/ext-base.js"> </script>
<script type="text/javascript" src="src30/ext-all-debug.js"> </script>

<script>
Ext.onReady(function(){
var myBorderPanel = new Ext.Panel({
renderTo: document.body,
width: 700,
height: 500,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'South Region is resizable',
region: 'south', // position for region
height: 100


},{
// xtype: 'panel' implied by default
title: 'West Region is collapsible',
region:'west',
width: 200,
autoScroll: true,
layout: 'fit',

items: [
{xtype:'panel',collapsible:true, title:'asfdsf', html:'dsafdsuzhfgdazfgds aiugfdiusfgaiudsgfudasgfaudisgfu dsgfsauzfgdsuzfg'},
{xtype:'panel',collapsible:true, title:'asfdsf', html:'dsafdsuzhfgdazfgds aiugfdiusfgaiudsgfudasgfaudisgfu dsgfsauzfgdsuzfg'},
{xtype:'panel',collapsible:true, title:'asfdsf', html:'dsafdsuzhfgdazfgds aiugfdiusfgaiudsgfudasgfaudisgfu dsgfsauzfgdsuzfg'},
{xtype:'panel',collapsible:true, title:'asfdsf', html:'dsafdsuzhfgdazfgds aiugfdiusfgaiudsgfudasgfaudisgfu dsgfsauzfgdsuzfg'},
{xtype:'panel',collapsible:true, title:'asfdsf', html:'dsafdsuzhfgdazfgds aiugfdiusfgaiudsgfudasgfaudisgfu dsgfsauzfgdsuzfg'},
{xtype:'panel',collapsible:true, title:'asfdsf', html:'dsafdsuzhfgdazfgds aiugfdiusfgaiudsgfudasgfaudisgfu dsgfsauzfgdsuzfg'},
]

},{
title: 'Center Region',
region: 'center',
xtype: 'container',
layout: 'fit',
}]
});

myBorderPanel.show();

});
</script>
</head>
<body>
</body>
</html>
i am happy about every hint!

Nils

Condor
29 Aug 2009, 4:13 AM
Use:

layout: 'auto',
defaults: {autoWidth: true)
or

layout: 'anchor',
defaults: {anchor: '-17'}

steffenk
29 Aug 2009, 7:13 AM
layout: 'auto'

seems to be sufficent from my test, defaults isn't needed.

mrsunshine
31 Aug 2009, 12:35 AM
Thank you guys. it works !! =D>

steffenk
31 Aug 2009, 5:05 AM
after talking to you via skype the issue isn't solved completely. The region is rendered ok, but if the accordion has components like a trigger field, it's not updated when scrollbar (dis-)appears. That's a big problem with layout imho.

Condor
31 Aug 2009, 6:48 AM
This is impossible to solve (Ext doesn't get a signal when the scrollbar appears or disappears).

That is why I recommended:

layout: 'anchor',
defaults: {anchor: '-19'}
to always keep room for the scrollbar, even when it isn't visible.

(doesn't look as nice, but at least works consistently)

steffenk
31 Aug 2009, 12:34 PM
hm - i think Nils got a workaround. For Accordion this only could happen when you collapse/expand, or if window is resized. So you could look if the width of the panel has changed. Of course no general approach, but a possibility.

Condor
1 Sep 2009, 1:12 AM
Yes, you can work around this if you actually know when the height of the content changes (e.g. by adding expand and collapse listeners to the panels).