PDA

View Full Version : hbox and form issue in IE6



thaiat
10 Oct 2009, 10:06 AM
Hi,

Using Ext 3.0.0
I have an issue when using hbox layout and a form in IE 6, form field are hidden :


var window = new Ext.Window({
title : 'test',
width : 500,
height : 400,
layout : 'hbox',
layoutConfig : {
align : 'stretch'
pack : 'start'
},
frame : true,
bodyStyle : 'padding: 6px',
items : [{
xtype : 'panel',
frame : true,
html : 'this is a panel',
flex : 1
}, new Ext.form.FormPanel({
defaultType : 'textfield',
autoScroll : true,
frame : true,
flex : 1,
defaults : {
msgTarget : 'side'
},
bodyStyle : 'padding: 5px',
items : [{
fieldLabel : 'Name'
}, {
fieldLabel : 'LastName'
}]
})]
});
window.show();
In FF the form fields are visible although appearing with a scrollbar.

If i change the layout to border everything shows fine.


Cheers

Animal
10 Oct 2009, 10:22 AM
IE6, the bane of our lives!

I can't reproduce because I dont have IE6, but I think the default labelWidth could be making the full TextField items too wide. And the FormPanel is autoScroll: true, so you'd expect a scrollbar in that case.

Try this:



new Ext.Window({
title : 'test',
width : 500,
height : 300,
layout : {
type: 'hbox',
align : 'stretch',
pack : 'start'
},
bodyStyle : 'padding: 6px',
items : [{
xtype : 'panel',
frame : true,
html : 'this is a panel',
flex : 1
}, new Ext.form.FormPanel({
defaultType : 'textfield',
autoScroll : true,
labelWidth : 90,
flex : 1,
defaults : {
msgTarget : 'side'
},
bodyStyle : 'padding: 5px',
items : [{
fieldLabel : 'Name'
}, {
fieldLabel : 'LastName'
}]
})]
}).show();

Animal
10 Oct 2009, 10:36 AM
But also, it would be normal, in a formlayout Container to anchor the widths of Fields, so adding



new Ext.Window({
title : 'test',
width : 500,
height : 300,
layout : {
type: 'hbox',
align : 'stretch',
pack : 'start'
},
bodyStyle : 'padding: 6px',
items : [{
xtype : 'panel',
frame : true,
html : 'this is a panel',
flex : 1
}, new Ext.form.FormPanel({
defaultType : 'textfield',
autoScroll : true,
labelWidth : 90,
flex : 1,
defaults : {
msgTarget : 'side',
anchor: '-20' // allow space for error icon
},
bodyStyle : 'padding: 5px',
items : [{
fieldLabel : 'Name'
}, {
fieldLabel : 'LastName'
}]
})]
}).show();

thaiat
10 Oct 2009, 11:16 AM
yep the anchor did the trick, my fields where in fact inside a fieldset, with anchor defined in the fieldset but not above.
When anchor is added also above the fieldset it works on IE6 like it was on other browsers...

Cheers