PDA

View Full Version : Layout in IE all messed up (and it was designed in ExtDesigner)



Cybjorg
26 Jan 2011, 12:46 PM
I put together a form to collect user data in Ext Designer. When I exported the code and tested it in various browsers, it was completely borked in IE8/9 and looked good in everything else. Can someone shed some light on how to fix this?

Here's the code. All of this (and several other elements) are nested inside a vbox:


{
xtype: 'container',
flex: 1,
margins: '0 0 10 0',
layout: 'hbox',
height: 80,
id: 'studentPersonalInfo',
layoutConfig: {
align: 'stretch'
},
items: [
{
xtype: 'dataview',
itemSelector: 'div',
tpl: '<tpl for="."><div class="avatar"></div></tpl>',
flex: 1,
width: 70,
height: 70,
id: 'studentPicture'
},
{
xtype: 'container',
id: 'studentNameAddress',
flex: 1,
layout: 'form',
labelWidth: 90,
items: [
{
xtype: 'compositefield',
fieldLabel: 'Full name',
anchor: '100%',
id: 'fullName',
items: [
{
xtype: 'textfield',
flex: 1,
emptyText: 'First',
width: 120,
id: 'firstName'
},
{
xtype: 'textfield',
flex: 1,
fieldLabel: 'Label',
emptyText: 'Middle',
width: 120,
id: 'middleName'
},
{
xtype: 'textfield',
flex: 1,
fieldLabel: 'Label',
emptyText: 'Last',
id: 'lastName'
}
]
},
{
xtype: 'compositefield',
fieldLabel: 'Preferred name',
anchor: '100%',
id: 'displayNameGender',
items: [
{
xtype: 'textfield',
flex: 1,
fieldLabel: 'Label',
margins: '0 15 0 0',
id: 'displayName'
},
{
xtype: 'displayfield',
value: 'Gender:',
flex: 1,
width: 45,
id: 'genderLabel'
},
{
xtype: 'combo',
flex: 1,
fieldLabel: 'Gender',
width: 60
}
]
},
{
xtype: 'compositefield',
fieldLabel: 'Date of birth',
anchor: '100%',
id: 'birthDateAgeEthnicity',
items: [
{
xtype: 'datefield',
fieldLabel: 'Label',
margins: '0 15 0 0',
width: 100
},
{
xtype: 'displayfield',
value: 'Age:',
width: 30,
id: 'ageLabel'
},
{
xtype: 'textfield',
flex: 1,
fieldLabel: 'Label',
width: 40,
disabled: true,
margins: '0 15 0 0',
id: 'age'
},
{
xtype: 'displayfield',
value: 'Ethnicity:',
flex: 1,
fieldLabel: 'Label',
width: 55,
id: 'ethnicityLabel'
},
{
xtype: 'combo',
flex: 1,
fieldLabel: 'Label',
id: 'ethnicity'
}
]
}
]
}

Here are image examples of the problem:

Firefox (correct):
24476

Internet Explorer (borked):
24477

Cybjorg
27 Jan 2011, 8:56 AM
It turns out the DataView is messing up the layout. Once the DataView is removed, the layout snaps back to the way it should be in IE. I'm not sure why this is, however. More testing pending.

Cybjorg
31 Jan 2011, 7:46 AM
Further investigation reveals that DataView was not the culprit. IE seems to have a problem with containers nested inside an hbox. Changing the xtype of the 'studentNameAddress' container to 'panel' did the trick. Of course, I had to turn off the title and borders in order to make it invisible. Not sure why IE recognizes nested panels and constrains them to the coordinates of their parent containers, but not nested containers.