PDA

View Full Version : Issues in IE 8 while rendering complex layouts



sjmittal
3 Feb 2011, 4:19 AM
Ext version tested:


Ext 3.0.0



Adapter used:


ext



css used:


only default ext-all.css



Browser versions tested against:


IE8
FF3
Chrome4



Operating System:


WinXP Pro



Description:


Describe the problem in greater detail here, summarizing the behavior.



Test Case:
Please save the attached code into a file and place it inside the root director of extjs.
Open the page in FF3, IE8 and Chrome8.
You would notice the layouts is rendered perfectly in FF and Chrome, however it messes up completely in IE8.

Note the layouts are complex nested, with border within border layouts. There is a hbox layout in center region and each hbox element inturn has form layout with form fields.
The rendering of form fields is completely messed up in IE and field anchors are not being followed.




<html>
<head>
<title>Layout</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />

<script type="text/javascript" src="adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="ext-all-debug.js"></script>

<script type="text/javascript">
Ext.onReady(function(){

var detailsPanel = new Ext.Panel({
layout: 'border',
header: false,
items: [{
region: 'west',
collapsible: true,
title: 'Pages',
xtype: 'treepanel',
width: 200,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.AsyncTreeNode({
expanded: true,
children: [{
text: 'Summary',
leaf: true
}, {
text: 'Issuance',
leaf: true
}, {
text: 'Dividends',
leaf: true
}]
}),
rootVisible: false
}, {
region: 'center',
xtype: 'form',
title: 'Details',
autoScroll: true,
defaults: {
anchor: '97%'
},
items: [{
items : [
{
"layout" : "hbox",
"layoutConfig" : {
"align" : "stretchmax"
},
"xtype" : "container",
"defaults" : {
"xtype" : "container"
},
"items" : [
{
"items" : {
"xtype" : "container",
"layout" : "form",
"labelWidth" : 59,
"defaults" : {
"anchor" : "100%"
},
"style" : {
"padding" : "5px"
},
"items" : [
{
"fieldLabel" : "Prima ...",
"store" : [],
"xtype" : "combo",
"allowBlank" : true,
"mode" : "local",
"displayField" : "text",
"valueField" : "value",
"triggerAction" : "all",
"selectOnFocus" : true,
"forceSelection" : true,
"resizable" : true,
"typeAhead" : true,
"isFormField" : true,
"qtip" : "Primary Exchange"
},
{
"fieldLabel" : "MIC",
"xtype" : "textfield",
"allowBlank" : true,
"isFormField" : true
} ]
},
"flex" : 1
},
{
"items" : {
"xtype" : "container",
"layout" : "form",
"labelWidth" : 59,
"defaults" : {
"anchor" : "100%"
},
"style" : {
"padding" : "5px"
},
"items" : [
{
"fieldLabel" : "RIC",
"xtype" : "textfield",
"allowBlank" : true,
"isFormField" : true
},
{
"fieldLabel" : "BB Ticker",
"xtype" : "textfield",
"allowBlank" : true,
"isFormField" : true
},
{
"fieldLabel" : "Sedol",
"xtype" : "textfield",
"allowBlank" : true,
"isFormField" : true
} ]
},
"flex" : 1
},
{
"items" : {
"xtype" : "container",
"layout" : "form",
"labelWidth" : 59,
"defaults" : {
"anchor" : "100%"
},
"style" : {
"padding" : "5px"
},
"items" : [
{
"fieldLabel" : "Marke ...",
"store" : [],
"xtype" : "combo",
"allowBlank" : true,
"mode" : "local",
"displayField" : "text",
"valueField" : "value",
"triggerAction" : "all",
"selectOnFocus" : true,
"forceSelection" : true,
"resizable" : true,
"typeAhead" : true,
"isFormField" : true,
"qtip" : "Market Status"
},
{
"fieldLabel" : "Tradi ...",
"xtype" : "textfield",
"allowBlank" : true,
"editable" : false,
"readOnly" : false,
"isFormField" : true,
"qtip" : "Trading Country"
},
{
"fieldLabel" : "Round ...",
"xtype" : "numberfield",
"allowBlank" : true,
"decimalPrecision" : 11,
"maxLength" : 33,
"isFormField" : true,
"qtip" : "Round Lot Size"
} ]
},
"flex" : 1
},
{
"items" : {
"xtype" : "container",
"layout" : "form",
"labelWidth" : 59,
"defaults" : {
"anchor" : "100%"
},
"style" : {
"padding" : "5px"
},
"items" : [
{
"fieldLabel" : "Prima ...",
"store" : [],
"xtype" : "combo",
"allowBlank" : true,
"mode" : "local",
"displayField" : "text",
"valueField" : "value",
"triggerAction" : "all",
"selectOnFocus" : true,
"forceSelection" : true,
"resizable" : true,
"typeAhead" : true,
"isFormField" : true,
"qtip" : "Primary Exchange"
},
{
"fieldLabel" : "MIC",
"xtype" : "textfield",
"allowBlank" : true,
"isFormField" : true
} ]
},
"flex" : 1
},
{
"items" : {
"xtype" : "container",
"layout" : "form",
"labelWidth" : 59,
"defaults" : {
"anchor" : "100%"
},
"style" : {
"padding" : "5px"
},
"items" : [
{
"fieldLabel" : "RIC",
"xtype" : "textfield",
"allowBlank" : true,
"isFormField" : true
},
{
"fieldLabel" : "BB Ticker",
"xtype" : "textfield",
"allowBlank" : true,
"isFormField" : true
},
{
"fieldLabel" : "Sedol",
"xtype" : "textfield",
"allowBlank" : true,
"isFormField" : true
} ]
},
"flex" : 1
},
{
"items" : {
"xtype" : "container",
"layout" : "form",
"labelWidth" : 59,
"defaults" : {
"anchor" : "100%"
},
"style" : {
"padding" : "5px"
},
"items" : [
{
"fieldLabel" : "Marke ...",
"store" : [],
"xtype" : "combo",
"allowBlank" : true,
"mode" : "local",
"displayField" : "text",
"valueField" : "value",
"triggerAction" : "all",
"selectOnFocus" : true,
"forceSelection" : true,
"resizable" : true,
"typeAhead" : true,
"isFormField" : true,
"qtip" : "Market Status"
},
{
"fieldLabel" : "Tradi ...",
"xtype" : "textfield",
"allowBlank" : true,
"editable" : false,
"readOnly" : false,
"isFormField" : true,
"qtip" : "Trading Country"
},
{
"fieldLabel" : "Round ...",
"xtype" : "numberfield",
"allowBlank" : true,
"decimalPrecision" : 11,
"maxLength" : 33,
"isFormField" : true,
"qtip" : "Round Lot Size"
} ]
},
"flex" : 1
}
]
}
]
}]
}]
});

var center_card = new Ext.Panel({
region: 'center',
layout: 'fit',
items: [detailsPanel]
});


var viewport = new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
contentEl: 'north'
}, {
region: 'south',
contentEl: 'south'
}, {
region: 'center',
layout: 'border',
items: [{
region: 'north',
height: 26,
xtype: 'toolbar',
items: [{
text: 'Favorites',
menu: {
xtype: 'menu',
items: [{
text: 'Fav Item 1'
}, {
text: 'Fav Item 2'
}]
}
}, {
text: 'All Business Object',
menu: {
xtype: 'menu',
items: [{
text: 'Issue',
menu: {
items: [{
text: 'Issue'
}, {
text: 'Issue Group'
}, {
text: 'Issue Type'
}]
}
}, {
text: 'Issuer',
menu: {
items: [{
text: 'Issuer'
}, {
text: 'Issuer Group'
}, {
text: 'Exclude Criteria'
}]
}
}]
}
}, {
text: 'Save Changes'
}, {
text: 'Back to search'
}]
}, center_card]
}]
});
});
</script>
</head>
<body>
<div id="north">
<table width="100%" cellspacing="0" cellpadding="0" class="gs_headerback" id="headerTBL">
<tr>
<td width="150px"><img src="" alt="XXX Workstation"></td>
<td class="gs_headerImg">
<table width="100%">
<tr>
<td valign="bottom" align="center"><span class="gs_appLogo">Securities</span></td>
<td width="78%" valign="top">
<table width="100%" cellspacing="0" cellpadding="2" border="0">
<tr>
<td valign="top" align="right" class="gs_headerlinks" colspan="2">
Welcome <i>admin</i> |<a href="#">Logout</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div id="south">
<table height="20" width="100%" cellspacing="0" cellpadding="0" id="footerTbl" class="gs_footer">
<tr>
<td width="10px" align="left">
<img border="0" align="absmiddle" src="" alt="corporate">
</td>
<td width="133px" align="left">
<span>&nbsp;&nbsp;Powered by X</span>
</td>
<td class="gs_coinfoncopyright">
<table width="100%"><tbody><tr>
<td align="right">
<span>Copyright &copy; X Corporation</span>
</td>
<td align="right">
<span>Securities xxx - Workstation vxxx</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>


Steps to reproduce the problem:


Save the attached code into a file
Place the file in root dir of extjs
Open the saved file in IE8



The result that was expected:


Fields should be laid out correctly like its done in FF and Chrome



The result that occurs instead:


Layout is messed up in IE



Screenshot:


attached jpeg images



Debugging already done:


I tried using IE developer tool. It seems for trigger field the width of the field is not less than the width of containing container.



Possible fix:


I suppose we need to fix the onRender of trigger fields.

Condor
3 Feb 2011, 4:37 AM
1. This is NOT a report for Ext 3.0.0. Please state the actual version you are reporting this bug for.
2. Your layout is overnested. The container with hbox layout should contain containers with form layout. The extra containers in between should be removed.
3. This is a known issue in IE when using fields smaller than their default width. I recommend configuring the fields with width:1 in combination with anchor:'100%' (which you are already using as default).

sjmittal
3 Feb 2011, 5:11 AM
Issue is for Ext JS Library 3.3.0.
I had dropped the html inside that extjs root dir.

If I remove the extra nesting layout and add width: 1 for each form field, like you said, layout is still not proper.

However I saw one more thing:
If I keep the extra nesting but for each form field pass auto create with a small size:
autoCreate : {tag: "input", type: "text", size: "4", autocomplete: "off"}
then I see that form fields are contained withing the parent form layout. However question is how to find out the size dynamically, as number of columns may differ with data.

So setting width: 1 does not fixes the issue as it seems anchor is picked up.

sjmittal
4 Feb 2011, 5:46 AM
Hi,
After much debugging I found that if I override
defaultAutoCreate : {tag: "input", type: "text", size: "1", autocomplete: "off"} to the form field config

or specify autoCreate as above config then the field rendering works fine in IE8 also.

Only thing one needs to do additionally in above case is to always specify width or anchor to the form field config.

So one needs to configure with smaller size attribute to make this work.

I was wondering why doesn't extjs team keeps defaultAutoCreate as suggested above and those fields for which this is done like Field, ComboBox, TriggerField and DateField, have a default width property instead.

This way rendering of form fields within nested form layouts would always work for IE also, in case when the computed width is smaller than the default taken by the size attribute.

Thanks
Sachin