PDA

View Full Version : Column layout not resizing its children?



damnos
18 Mar 2009, 10:06 AM
I have a panel with column layout with 5 children panels in it, my problem is when i resize the browser window the children doesnt get resized accordingly.

So when i resize my window horizontally, the last child panel will get hidden (instead of all the children resize accordingly), and similarly when I make the window wider, all the children stays the same size and created an empty space to the right.

Am I missing some setting so that the children resize accordingly? The parent panel seem to resize properly as I made the window wider, but the children stayed.

basically i have:

panel
{
layout: column;

items: [
{ panel { columnWidth: .2} },
{ panel { columnWidth: .2} },
{ panel { columnWidth: .2} },
{ panel { columnWidth: .2} },
{ panel { columnWidth: .2} },
]
}

18 Mar 2009, 10:49 AM
if that's your code, it's syntactically incorrect.

18 Mar 2009, 10:50 AM
see: http://tdg-i.com/extjsinaction/chapter04/4.9.html

damnos
18 Mar 2009, 11:59 AM
that's not my code, it's just a "pseudocode" kind of thing, my code has lots of things hooked up into it so it would be difficult to post a working code without posting tons of lines of code

damnos
18 Mar 2009, 12:01 PM
I found out the children in the column layout doesnt listen to resize event - but the samples work, so probably some other event control the resizing of the children?

schoterson
16 Apr 2009, 11:47 AM
I concur. When using a columnLayout inside a panel the columns will grow in width in both FF 3 and IE 6 correctly, but when I resize the window smaller, the columns don't change their width in IE. FF behaves correctly.

Adding listeners can verify that when the window is expand (width wise) the onWindowResize event occurs as well as the layout panels and childrens resize event get triggered. But when decreasing the browser width the onWindowResize event occurs but the column layout and its children do not fire their resize events.

What's interesting is that if you use a panel with layout of column inside the center region of a borderlayout it does resize correctly in both IE and FF.




<div id="c-root">

</div>
<br />
<br /> <br /> <br />
<div id="column-layout">

</div>

<script type="text/javascript">
Ext.onReady(
function() {
var column = new Ext.Panel({
renderTo:'column-layout',
layout:'border',
autoWidth:true,
height:70,
monitorResize:true,
items:
{
region:'center',
bodyBorder:false,
layout:'column',
items: [{
title: 'Width = 25%',
columnWidth: .25,
html: 'Content'
},{
title: 'Width = 75%',
columnWidth: .75,
html: 'Content'
},{
title: 'Width = 250px',
width: 250,
html: 'Content'
}]
}

});


var root = new Ext.Panel(
{
renderTo:'c-root',
autoWidth:true,
height:300,
defaults:{autoWidth:true, monitorResize:true,
listeners: {
'resize': function() {alert("resizing "+this.id);}
}
},
monitorResize:true,
items: [
{
id:'c-top',
autoWidth:true,
defaults: {autoHeight:true, autoWidth:true },
layout:'card',
activeItem:0,
items: [
{
layout:'column',
id:'c-head',
monitorResize:true,
defaults:{
listeners: {
'resize': function() {alert("resizing "+this.id);}
}
},
items: [
{
id:'c-logo',
//width:200,
columnWidth:.15,
html:'<img src="/cec/common/i/logo.gif"/>'
},
{
id:'c-head-contents',
tbar: [{text:'button'},'->', '-',{text:'button2'}],
columnWidth:.85,
monitorResize:true,
html: '<h1 style="background-color:blue"> Scott was here </h1>'
}
]
},
{
id:'c-head-collapsed',
tbar: [{text:'button'},'->', 'Scott was here', '-',{text:'button2'},{text:'button3'},{text:'button4'}]
}
]
},
{
id:'c-middle',
html: '<p style="width:600px; background-color:red;">Some content</p>'
},
{
id: 'c-foot',
html:'scott\'s footer'
}
]
}
);
alert("root is"+root.id);
Ext.EventManager.onWindowResize(
function(){
alert("the window resized");
var size = root.getSize();
return alert(size.width);
}
);
}
);
</script>

slemmon
14 May 2009, 5:38 AM
I just discovered the same issue setting up a columnLayout in a south region. The colums children panels will resize automagically when increasing the IE7 window width, but not when decreasing the width.

Can anyone suggest a fix/work-arround? I'm pretty novice and don't understand all the ins and outs, but thought calling doLayout on some parent container might force a resize back to .5, .5 for my column widths, but haven't come across a solution.

I did see JGarcia's screencast on vbox layouts. Is it time to migrate my code to 3.0 using the vbox layout perhaps?

Animal
14 May 2009, 5:55 AM
It WORKS

If you PUT and column layout Container INSIDE OF a Container WHICH PERFORMS NO SIZING OF ITS CHILD COMPONENTS, then of course columns are never going to be resized.

Are they now?

slemmon
14 May 2009, 9:39 AM
I'm still learning all this, but I believe what I've got set up is just a bare-bones viewport with border layout with a west, east, and center region with a south nested under the center region.

I dropped in the check-radio sample form that has two child elements itself:
Child1 - has a column layout that has two child framesets
Child2 - has a form layout that has one child frameset

Increasing the width of the browser window resizes the framesets in both the column (Child1) and the frameset in the form layout (Child2). Decrease or increase the width of the adjacent panels (making the center region larger/smaller) will resize Child2, but not Child1 - provided Child2's width exceeds Child1's width. Decrease the width of the window and the frameset under Child2 will resize, but the framesets under Child1 will not.

Sorry, I know I'm not answering your question very well (or I am and don't even know I am). I'm pretty new at composing EXT and don't understand the relationships between different components/layouts, yet. The example page for check-radio seemed like a great way to set up two items in a frame panel with one being two columns and the other being only one, but I'm sure open to new ways to accomplish that layout and gain the resize-on-width reduction working for all child elements.

Thanks in advance for any suggestions/explanations.

I'll post my example code for reference:




var viewport = new Ext.Viewport({
layout: 'border',
items:[
new Ext.BoxComponent({
region:'north',
el: 'north',
height:32
}),{
region: 'west',
title: 'West',
bodyStyle:'padding:5px 5px 0',
width: 250,
minSize: 175,
maxSize: 400,
collapsible: true,
split: true,
html: 'West HTML'}
,
new Ext.TabPanel({
region:'center',
deferredRender:false,
defaults: {autoscroll: true},
activeTab:0,
items:[{
title: 'Tab1',
layout: 'border',
items:[
{
region: 'center',
html: 'Tab 1 HTML'
},
new Ext.FormPanel({
frame: true,
region: 'south',
split: true,
title:'Check/Radio Groups',
labelWidth: 110,
height: 250,
minSize: 70,
maxSize: 500,
collapsible: true,
bodyStyle: 'padding:0 10px 0;',


autoScroll: true,


items: [{


layout: 'column',

border: false,

defaults: {
columnWidth: '.5',
border: false
},











/*====================================================================


* Individual checkbox/radio examples


*====================================================================*/







items: [{


bodyStyle: 'padding-right:5px;',


items: {

xtype:'fieldset',

title: 'Individual Checkboxes',
autoHeight: true,
defaultType: 'checkbox', // each item will be a checkbox
items: [{
xtype: 'textfield',
name: 'txt-test1',
fieldLabel: 'Alignment Test'
}]
}
},{
bodyStyle: 'padding-left:5px;',
items: {
xtype:'fieldset',
title: 'Individual Radios',
autoHeight: true,
defaultType: 'radio', // each item will be a radio button
items: [{
xtype: 'textfield',
name: 'txt-test2',
fieldLabel: 'Alignment Test'
}]
}
}]
},{











/*====================================================================


* CheckGroup examples


*====================================================================*/







xtype:'fieldset',
title: 'Checkbox Groups',


autoHeight: true,


layout: 'form',

items: [{

xtype: 'textfield',
name: 'txt-test3',
fieldLabel: 'Alignment Test',
anchor: '95%'









}]


}]


})]

}]

}),{
region:'east',
title:'East',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'0 5 0 0',
html: 'Context info from center panel'
}]









})

Animal
14 May 2009, 12:53 PM
So. READing the documentation, you see that (and I quote here)


By default, Containers use the ContainerLayout scheme. This simply renders child components, appending them one after the other inside the Container, and does not apply any sizing at all.

So that single child item which you have given layout: 'column' will not be sized in any way.

Why did you add this extra, inner layer?

WHy not configure the "south" region as layout: 'column'???

DiscoBoy
29 Mar 2010, 1:19 AM
I have a very similar problem and don't get why my column layout is not resized. The following code shows the structure of my application:



xtype: 'panel',
layout: 'fit',
items: [{
xtype: 'tabpanel',
border: false,
monitorResize: true,
activeTab: 0,
listeners: {
'resize': function() {console.log("resizing "+this.id);}
},
items: [{
title: 'Scenarios',
bodyStyle: {padding: '10px'},
items: [{
xtype: 'DescriptionPanel',
description: {
'title': 'Settings',
'description': 'This dialog allows to create, edit, load ...!'
}
},{
xtype: 'fieldset',
title: 'Select countries for the scenario',
layout: 'column',
listeners: {
'resize': function() {console.log("resizing "+this.title);}
}
},{
xtype: 'fieldset',
title: 'Load Windspeed settings from scenario file',
items: [{....
The problem occurs in the fieldset (title: 'Select countries for the scenario'), which has the layout column. As this layout is nested in a panel with the layout 'fit' (setting layout 'fit' on tabpanel procues an error), it should behave correctly and resize as I understood from your comments above. It does this in IE but nevertherless with Firefox 3.6, the colum layout keeps its initial width on resize, while all other child-elements resize properly.

UPDATE: This only happens with fieldsets, but when using a normal panel this issue does not occure. The strange thing is that other fieldsets not configured with the 'column' layout do resize properly.

Could this also be an DOCTYPE issue? (<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">)

Already wasted some hours on this problem and don't know what to do...