PDA

View Full Version : Cross-Browser?



sportda
7 Nov 2010, 3:59 PM
2317923178

I'm new to EXT JS and have been working on an app using Firefox/Firebug. Today I loaded it up in IE8 and what works fine in Firefox does not work very well at all in IE8. Two screen shots are attached, one from each browser. Several components including text fields and fieldsets are completely missing in IE8.

The accordion panel IS working and the ajax and drag and drop seems to be working also.

There was a lot of debugging done in firebug to get this all working, how can I debug in IE8 to get it working there?

Is it "normal" to run into these kinds of browser problems, I though EXT JS protected you from this?

moegal
7 Nov 2010, 4:04 PM
you might want to post some code. IE doesn't respond well to missing or extra commas.

plalx
7 Nov 2010, 5:13 PM
Also, note that Ext doesn't support IE compatibility (quirks) mode.

sportda
7 Nov 2010, 8:02 PM
The first time I loaded it in IE8 it flagged about a dozen instances of extra commas which I fixed before it would come up at all so I don't think it's that but I'll take a look. I'll post some code if I can narrow it down.

I"m not using a doctype, I notice IE8 has a new "compatibility" button, not sure what difference that makes.

Thanks guys.

sportda
7 Nov 2010, 9:07 PM
I don't know if anyone can see anything here that explains this but below is some code. For some reason the components on the right side are not displayed although I seem to be able to access those components by their ids as if they are really there some how but just not displayed. In the code below the owner_fields portion of the fieldset is not displayed.



var horse_fields =
{
xtype : 'container',
layout: 'form',
title : 'Horse',
border : true,
marginLeft: 10,
items:
[{
xtype : 'textfield',
id : 'horse_field',
fieldLabel : 'Name',
name : 'name',
readOnly : true,
width : 150,
ddGroup : 'horse',
listeners:
{
render: initializeHorseDropZone
}
},{
xtype : 'container',
id : 'horse_nos',
plugins: new Ext.ux.Plugin.LiteRemoteComponent({
url : 'plugin_org_no.php?show_no=' + selected_show.unique_no + '&type=1&id=0'
})
}
]
};
var owner_fields =
{
xtype : 'container',
layout: 'form',
title : 'Owner',
border : true,
marginLeft: 10,
items:
[{
xtype : 'textfield',
id : 'owner_field',
fieldLabel : 'Owner',
name : 'owner',
readOnly : true,
width : 150
},{
xtype: 'container',
id : 'owner_nos',
plugins: new Ext.ux.Plugin.LiteRemoteComponent({
url : 'plugin_org_no.php?show_no=' + selected_show.unique_no + '&type=2&id=0'
})
}
]
};
var horse_fieldset =
{
xtype: 'fieldset',
id: 'horse_fieldset',
title: 'Horse',
layout: 'hbox',
autoHeight:true,
width: 435,
collapsible: false,
//layoutConfig : { align : 'stretch' },
items: [horse_fields,owner_fields]
};

Animal
7 Nov 2010, 10:52 PM
You need to plan your layouts to size Components according to a conscious plan.

Condor
7 Nov 2010, 11:31 PM
Items in a hbox layout require either a 'width' or a 'flex' config option. Your fieldsets have neither.

sportda
8 Nov 2010, 6:46 AM
Adding the widths fixed it, thanks guys!

sportda
8 Nov 2010, 8:16 AM
Since I have some of the relevant code posted here, the pictures, and layout came up can I ask another question?

The outermost fieldsets, e.g. horse_fieldset are set to autoheight: true. When the inner fieldsets are expanded/collapsed the LiteRemotePlugin function has as part of what it does a doLayout() on the parent. So the height of the outermost fieldset can change dynamically. Is it possible to use a vbox layout where the bottom riders tab panel can automatically fill whatever space remains as the above two outer fieldsets get resized by their doLayouts()? I have this partially working now using some listeners with functions that recalculate the height of the tab panel but if there's a better way I don't want to miss it.

Condor
8 Nov 2010, 8:20 AM
That's what the 'flex' config option is for!

sportda
8 Nov 2010, 8:42 AM
So the heights on the outermost fieldsets changing isn't a factor? I can just put a flex: 1 on the bottom tabsheet with the changing heights on the two outer fieldsets and when the fieldset heights change and/or the window is resized the bottom tab panel will fill the space remaining?