PDA

View Full Version : when window resize; the fieldset is not getting resized



rahesh
19 Mar 2009, 5:10 AM
Hi

I have a problem when resizing the window.. when i resize (when decreasing width) the window the fieldset is not getting resized.. but is i increase the size then it works fine..

The problem is when i reduce the width of the window???

anybody please help..


thanks in advance

rahesh

Animal
19 Mar 2009, 5:51 AM
Sorry, I left my crystal ball at home.8-|

tryanDLS
19 Mar 2009, 8:37 AM
http://extjs.com/learn/Ext_Forum_Help
http://extjs.com/learn/Ext_Forum_Help#Posting_a_working_showcase

occy
27 Apr 2009, 11:19 PM
Hey Guys,

Im having a similar issue.. Thought i'd just bring it up within this thread (Save starting another one for the same issue) ..

Anyway the problem is only happening in IE6 & 7, AND only when i try to decrese the browser window, expanding it works fine. No issues in firefox, The fieldset resizes correctly when decreasing or increasing the window size.

Anyway, the details.
Its a simple FormPanel,
Within it is a Fieldset,
Within the Fieldset are two columns,
Each column has a few fields,

Anyway, Ive knocked up a simple bit of test code so you can see if im doing something wrong or missing something completely. Keep in mind im relativly new to Ext



var test = {
xtype: 'form',
border: false,
bodyBorder: false,
layout: 'fit',
items: [{
xtype: 'fieldset',
title: 'Testing Fieldset Resize',
autoHeight: true,
collapsed: false,
collapsible: true,
items: [{
layout: 'column',
border: false,
items: [{
columnWidth: .5,
border: false,
defaults: {anchor:'95%'},
layout: 'form',
items: [{
xtype: 'combo',
fieldLabel: 'bar'
}, {
xtype:'textfield',
fieldLabel: 'foo'
}]
}, {
columnWidth: .5,
layout: 'form',
border: false,
defaults: {anchor:'95%'},
items: [{
xtype: 'combo',
fieldLabel: 'bar'
}, {
xtype:'textfield',
fieldLabel: 'foo'
}]
}]
}
]
}]
}


Let me know if you would like me to post any screen shots (they wont be very interesting, basicly when u shrink the window, none of the field sizes chagne, it just cuts the right side of the fieldset and the fields in the 2nd column)

Any help would be greatly appreciated.

Thankyou in advance,

Animal
28 Apr 2009, 4:23 AM
Overnest.

Fieldset has DEFAULT LAYOUT and CONTAINS a column layout Panel.

WHY?

Please reply.

occy
28 Apr 2009, 2:32 PM
Hi Animal, Thank you for you prompt reply. I see what you mean when you say overnest, i hadnt actualy realised that, thankyou, ive changed the code to make the form panel to have the fieldset and use the column layout. This basicly worked exactly the same as it did in firefox, still resizes correctly but IE still has the same issue, Any help would be hugely appreciated, thanks again.



var test = {
xtype: 'form',
border: false,
bodyBorder: false,
layout: 'fit',

items: [{
xtype: 'fieldset',
title: 'Testing Fieldset Resize',
autoHeight: true,
collapsed: false,
collapsible: true,
layout: 'column',
defaults: {columnWidth: .5, layout: 'form', border: false},

items: [{
defaults: {anchor:'95%'},
items: [{
xtype: 'combo',
fieldLabel: 'bar'
}, {
xtype:'textfield',
fieldLabel: 'foo'
}]
}, {
defaults: {anchor:'95%'},
items: [{
xtype: 'combo',
fieldLabel: 'bar'
}, {
xtype:'textfield',
fieldLabel: 'foo'
}]
}]

}]
}

occy
28 Apr 2009, 3:30 PM
Hey again, I was just having a look through some of Saki's form examples

http://examples.extjs.eu/

In the example : Column Layout in Form

Works great in Firefox, has exactly the same issues im getting in IE6 & 7. It allows the fields in the columns to expand but not contract, when u contract it just leaves the width of the first column the same and the 2nd column just gets chopped in half. I hope there is a solution to this because the client will only be using IE :(

Thanks again Animal, Look forward to your response

MarkB
16 Sep 2009, 12:11 PM
was this ever resolved? having the same problem with IE ...

Animal
16 Sep 2009, 9:54 PM
THere must be a missing or badly configured layout at some level in the hierarchy.

bbxx
9 Oct 2009, 8:52 PM
Having the same issue. It only seems to happen with column layout inside of a fieldset.

Animal
10 Oct 2009, 12:06 AM
A container which is using column layout which you put INSIDE OF a fieldset?

Instead of just making the fieldset layout: 'column'???

bbxx
10 Oct 2009, 7:32 AM
A container which is using column layout which you put INSIDE OF a fieldset?

Instead of just making the fieldset layout: 'column'???

Sorry, I wasn't clear. The fieldset is set to column layout.



{
xtype: 'fieldset',
title: 'Basics',
collapsible: true,
autoHeight: true,
layout: 'column',
labelWidth: 40,
//defaultType: 'checkbox', // each item will be a checkbox
items: formulaNameType
}

previously defined...

var formulaNameType = [{
bodyStyle: 'padding-right:5px;padding-top:32px;',
items: {
xtype: 'textfield',
name: 'formula-name',
fieldLabel: 'Name'
}
}, {
bodyStyle: 'padding-left:5px;',
items: {
xtype: 'fieldset',
title: 'What is being measured?',
autoHeight: true,
labelWidth: 1,
layout: 'column',
items: [formulaMeasuredLeft, formulaMeasuredRight]
}
}];

Animal
10 Oct 2009, 9:16 AM
But what do you hope is going to happen?

You have not asked that either of those columns be managed with a variable columnWidth

And is that fieldset itself having ITS width managed by its parent Container? It looks to me like you are just hoping it will read your mind.

bluewing
16 Oct 2009, 3:07 AM
???????????:D

ivanleblanc
21 Dec 2009, 6:15 AM
I seem to have found a work around for this issue. Using a table layout instead of a column layout will auto resize the fieldset when the window is resized.

Here is an example of my test code:



Ext.onReady(function(){

var form = new Ext.form.FormPanel({
region:'center',
border:false,
frame:true,
items:{
xtype:'fieldset',
title:'General Information',
layout:'table',
layoutConfig: {
columns:2,
tableAttrs:{style:{width:'100%'}}
},
defaults: {border:false, layout:'form'},
items: [{
bodyStyle:'padding-right:5px;',
defaults:{xtype:'textarea', width:'100%'},
items: [
{fieldLabel: 'Field 1', name: 'field1'},
{fieldLabel: 'Field 2', name: 'field2'}
]
},{
defaults:{xtype:'textarea', width:'100%'},
items: [
{fieldLabel: 'Field 3', name: 'field3'},
{fieldLabel: 'Field 4', name: 'field4'}
]
}]
}
});

viewport = new Ext.Viewport({
title:'Form containing a Fieldset with column layout',
layout:'border',
autoHeight:true,
items:form
});

}); //end onReady