PDA

View Full Version : FormPanel designed in Designer and placed in Card Layout does not show up in IE 6



Bucs
30 Jun 2010, 6:54 PM
Designer version tested:

Designer 1.01.c

Operating System:

Mac OSX

Description:

I designed a formPanel in the designer just like an example layout that I saw and have dropped it in a Card layout along with other container and border layout components that are each on different 'cards'. All panels work great in all the latest releases of the major browsers (IE 8, Chrome, and FF), however, none of the formPanel components appear in the Card layout when viewed with IE 6.

I know, I know...I don't want to support it either...but unfortunately it's part of the requirements. And given that other border and container layouts are showing up in the same card layout in IE 6, I'm thinking there is a problem with the height not being properly handled or specified for the IE 6 rendering engine to interpret.

Test Case:



AMD.Module.Register.Form.ProfileInfoUi = Ext.extend(Ext.form.FormPanel, {
title: 'Profile Information',
labelWidth: 120,
labelAlign: 'left',
layout: 'form',
width: 600,
height: 310,
padding: 10,
frame: true,
id: 'formProfileInfo',
initComponent: function() {
this.defaults = {
itemCls: 'fieldLabel',
fieldClass: 'fieldClass'
};
this.items = [
{
xtype: 'container',
autoEl: 'div',
layout: 'hbox',
items: [
{
xtype: 'container',
autoEl: 'div',
layout: 'form',
margins: '0 10 0 0',
flex: 1,
items: [
{
xtype: 'textfield',
fieldLabel: 'First Name',
anchor: '100%',
tabIndex: 1,
name: 'FirstName',
labelStyle: 'fieldLabel',
allowBlank: false,
id: 'reg_prof_txt_FirstName'
}
]
},
{
xtype: 'container',
autoEl: 'div',
layout: 'form',
flex: 1,
items: [
{
xtype: 'textfield',
fieldLabel: 'Address',
anchor: '100%',
name: 'Address',
id: 'reg_prof_txt_Address'
}
]
}
]
},
{
xtype: 'container',
autoEl: 'div',
layout: 'hbox',
items: [
{
xtype: 'container',
autoEl: 'div',
layout: 'form',
margins: '0 10 0 0',
flex: 1,
items: [
{
xtype: 'textfield',
fieldLabel: 'Middle Init.',
anchor: '100%',
tabIndex: 2,
name: 'MiddleInitial',
id: 'reg_prof_txt_MiddleInitial'
}
]
},
{
xtype: 'container',
autoEl: 'div',
layout: 'form',
flex: 1,
items: [
{
xtype: 'textfield',
fieldLabel: 'Address 2',
anchor: '100%',
name: 'Address2',
id: 'reg_prof_txt_Address2'
}
]
}
]
},
{
xtype: 'container',
autoEl: 'div',
layout: 'hbox',
items: [
{
xtype: 'container',
autoEl: 'div',
layout: 'form',
margins: '0 10 0 0',
flex: 1,
items: [
{
xtype: 'textfield',
fieldLabel: 'Last Name',
anchor: '100%',
tabIndex: 3,
name: 'LastName',
id: 'reg_prof_txt_LastName'
}
]
},
{
xtype: 'container',
autoEl: 'div',
layout: 'form',
flex: 1,
items: [
{
xtype: 'textfield',
fieldLabel: 'City',
anchor: '100%',
name: 'City',
id: 'reg_prof_txt_City'
}
]
}
]
},
{
xtype: 'container',
autoEl: 'div',
layout: 'hbox',
items: [
{
xtype: 'container',
autoEl: 'div',
layout: 'form',
margins: '0 10 0 0',
flex: 1,
items: [
{
xtype: 'textfield',
fieldLabel: 'Email',
anchor: '100%',
tabIndex: 4,
name: 'Email',
id: 'reg_prof_txt_Email'
}
]
},
{
xtype: 'container',
autoEl: 'div',
layout: 'form',
flex: 1,
items: [
{
xtype: 'combo',
fieldLabel: 'State',
anchor: '100%',
name: 'State',
id: 'reg_prof_ddl_State'
}
]
}
]
},
{
xtype: 'container',
autoEl: 'div',
layout: 'hbox',
items: [
{
xtype: 'container',
autoEl: 'div',
layout: 'form',
margins: '0 10 0 0',
flex: 1,
items: [
{
xtype: 'textfield',
fieldLabel: 'Confirm Email',
anchor: '100%',
tabIndex: 5,
name: 'ConfirmEmail',
id: 'reg_prof_txt_ConfirmEmail'
}
]
},
{
xtype: 'container',
autoEl: 'div',
layout: 'form',
flex: 1,
items: [
{
xtype: 'textfield',
fieldLabel: 'Zip',
anchor: '100%',
name: 'Zip',
id: 'reg_prof_txt_Zip'
}
]
}
]
},
{
xtype: 'container',
autoEl: 'div',
layout: 'hbox',
items: [
{
xtype: 'container',
autoEl: 'div',
layout: 'form',
margins: '0 10 0 0',
flex: 1,
items: [
{
xtype: 'combo',
fieldLabel: 'Gender',
anchor: '100%',
name: 'Gender',
id: 'reg_prof_ddl_Gender'
}
]
},
{
xtype: 'container',
autoEl: 'div',
layout: 'form',
flex: 1,
items: [
{
xtype: 'textfield',
fieldLabel: 'Home Phone',
anchor: '100%',
name: 'HomePhone',
id: 'reg_prof_txt_HomePhone'
}
]
}
]
},
{
xtype: 'container',
autoEl: 'div',
layout: 'hbox',
items: [
{
xtype: 'container',
autoEl: 'div',
layout: 'form',
margins: '0 10 0 0',
flex: 1,
items: [
{
xtype: 'datefield',
fieldLabel: 'Birth Date',
anchor: '100%',
name: 'BirthDate',
id: 'reg_prof_txt_BirthDate'
}
]
},
{
xtype: 'container',
autoEl: 'div',
layout: 'form',
flex: 1,
id: '',
items: [
{
xtype: 'textfield',
fieldLabel: 'Alt. Phone',
anchor: '100%',
name: 'AltPhone',
id: 'reg_prof_txt_AltPhone'
}
]
}
]
},
{
xtype: 'container',
autoEl: 'div',
layout: 'hbox',
items: [
{
xtype: 'container',
autoEl: 'div',
layout: 'form',
margins: '0 10 0 0',
flex: 1,
items: [
{
xtype: 'textfield',
fieldLabel: 'Driver Lic. #',
anchor: '100%',
name: 'DriverLicNumber',
id: 'reg_prof_txt_DriverLicNumber'
}
]
},
{
xtype: 'container',
autoEl: 'div',
layout: 'form',
flex: 1,
items: [
{
xtype: 'combo',
fieldLabel: 'Race',
anchor: '100%',
name: 'Race',
id: 'reg_prof_ddl_Race'
}
]
}
]
},
{
xtype: 'container',
autoEl: 'div',
layout: 'hbox',
items: [
{
xtype: 'container',
autoEl: 'div',
layout: 'form',
margins: '0 10 0 0',
flex: 1,
items: [
{
xtype: 'combo',
fieldLabel: 'State Of Issue',
anchor: '100%',
name: 'StateOfIssue',
id: 'reg_prof_ddl_StateOfIssue'
}
]
},
{
xtype: 'container',
autoEl: 'div',
layout: 'form',
flex: 1,
items: [
{
xtype: 'combo',
fieldLabel: 'Primary Language',
anchor: '100%',
name: 'PrimaryLanguage',
id: 'reg_prof_ddl_PrimaryLanguage'
}
]
}
]
}
];
AMD.Module.Register.Form.ProfileInfoUi.superclass.initComponent.call(this);
}
});


Steps to reproduce the problem

Drop the above form in a Card layout and view in IE 6.
The result that was expected:

To see the the form.

The result that occurs instead:

No visible form whatsoever...and hard to use any debugger to see what;s going on ass none exist for that environment.


none

Possible fix:

not provided

jarrednicholls
1 Jul 2010, 4:13 AM
Have you tried removing the width/height of the form? A card layout is in fact a "fit" layout, so width/height can't be used anyways...although they aren't suppose to hurt it either. Can you duplicate your post on the Ext Bugs forum, as I don't see anything wrong per say and it may be an Ext bug. I'm guessing you're running 3.2.x right? When I get to an IE6 machine I'll poke at it.

Bucs
1 Jul 2010, 4:20 AM
Heh...I am in the process of trying exactly what you said as you posted it :) It does appear to be something along these lines and the fit layout I believe is going to be the answer.

Also, I added a root container object to hold all the other container rows so the card's fit layout truly only has one child.

However, even with that, IE 6 is forcing the fields to spread out evenly in the vertical direction, creating space between the rows. Do I need to pack these at the top? And if so, where do I put that param? New to hbox :)

Thanks again!

jarrednicholls
1 Jul 2010, 4:51 AM
Yeah that's kind of odd. I mean, you definitely have a lot of 1-child-containers that most likely aren't necessary. I haven't loaded up the project yet to see but I will.

"pack" in hbox is to pack left, right, or center, whereas "pack" in vbox is to pack top, middle, or bottom. "align" in an hbox can align the items at the top, the middle, or stretch them to fit the whole container. top is the default, so it shouldn't need to be set. But since you asked, these params are configured by highlighting the container, and then there are options in the Component Config pane on the right under the "(Layout)" group. By hand, they are set in either of the two fashions:



layout: {
type: 'hbox',
pack: 'center'
}




layout: 'hbox',
layoutConfig: {
pack: 'center'
}