PDA

View Full Version : IE madness,Column layout wont resize! Does not care about anchor. Can someone help?



occy
30 Apr 2009, 11:44 PM
Hey guys,

Been struggling on this for way to long now, i just don't understand why IE pays no attention to anchors on a field when they are held within a column layout. You'll notice the textarea does resize correctly???, resizing the window to a larger size works but as soon as you resize the window and make it smaller it all goes pear shaped and cuts the fields & labels off etc. Even does it on Sakis examples.

Im testing in both IE6 & 7..

Please can someone shed some light on the situation, its driving me absolutly mad! Please

Paste direction into firebug to see what i mean.



var win = new Ext.Window({
title : 'Whats Going On!!!',
height : 300,
width : 500,
layout : 'fit',
border : false,
items : [{
xtype : 'form',
frame: true,
labelWidth:90,
items: [{
layout: 'column',
defaults: {
columnWidth : .5,
layout : 'form',
border : false,
xtype : 'panel',
bodyStyle:'padding:0 18px 0 0'
},
items: [{
// left column
defaults:{anchor:'100%'},
items: [{
xtype : 'textfield',
fieldLabel : 'Rank / Title',
name : 'rankTitle'
}
]
},{
// right column
defaults:{anchor:'100%'},
items: [{
xtype : 'combo',
fieldLabel : 'Rank / Title',
name : 'rankTitle'
}
]
}
]
}, {
// bottom two span column
fieldLabel:'Text Area',
xtype:'textarea',
anchor:'-18 -30'
}
]
}
]
}).show()


I guess i just want to know if this is a bug or if im doing something wrong?? If its a bug then i guess i can just make the window a fixed witdth but thats really not a very elegant solution, I mean im using Ext for thse exact reasons -> interactive user interfaces.. Just not very elegant or interactive when the fields dont resize correctly... Makes the app look clunky as all hell.

Please any help would be really, really appreciated??

Thankyou All

occy
30 Apr 2009, 11:45 PM
Sorry, the bug is only in IE so you wont be pasting this into firebug lol.. :P

Just wack it into an Ext.OnReady and you'll be laughing at the way IE handles the resize..

Works a treat in Firefox Btw...

Problems are only in IE6 & IE7

Animal
30 Apr 2009, 11:48 PM
You have a form which is containing a column layout Panel.

But you are not requiring that form size the column layout Panel in any way. It won't guess what's in your mind about sizing. You have to instruct it with anchor configs.

occy
30 Apr 2009, 11:51 PM
Wow, thanks for the quick reply, When you say anchor config, I belive it does have the anchor config applied to the elements with in both sides of the column as well as the text area at the bottom??

See the first line of the left & right column

defaults:{anchor:'100%'},Can you be a little more spacific, sorry im still a little confused, what i actualy need to change?

occy
30 Apr 2009, 11:56 PM
To rephrase the question better, I guess i need this to work in IE exactly like it does in firefox as my client uses IE6 only.. It works exactly as expected in firefox which is why i think it may be an IE only bug??

Thanks again for your help, i really hope there is some kind of solution to this.

Animal
1 May 2009, 12:22 AM
You have a form: xtype: 'form'.


FormLayout extends AnchorLayout.

The form contains


A column layout Panel.

A textarea configured with anchors


Which one of those two child items gets sized correctly?