PDA

View Full Version : Grid under Fieldset has display issues on IE9 or IE8



effectivewang
19 Dec 2011, 1:40 AM
Here is the screenshot, grid suppose to under toggle image and line, but it is currenly over the line.

30130
I lookded into the generated HTML, find that the Grid content is not wrapped in the body element, following are the generated HTML.


<fieldset class="x-fieldset x-fieldset-default" id="auctionrates" role="presentation" style="width: 1004px; height: 350px;">
<DIV style="WIDTH: 1652px; TOP: 0px; LEFT: 10px" id=toolbar-1139 class="x-toolbar x-toolbar-default x-docked x-docked-top x-toolbar-docked-top x-toolbar-default-docked-top x-box-layout-ct" role=toolbar tabIndex=-1>
<DIV style="WIDTH: 1648px; HEIGHT: 22px" id=ext-gen1150 class=x-box-inner role=presentation>
<DIV style="MARGIN: 0px; TOP: 3px; LEFT: 4px" id=tbtext-1140 class="x-toolbar-text x-box-item x-toolbar-item x-toolbar-text-default" role=presentation tabIndex=-1>Rates</DIV>
<DIV style="BACKGROUND-IMAGE: none; MARGIN: 0px; TOP: 0px; LEFT: 838px" id=button-1141 class="x-btn x-box-item x-toolbar-item x-btn-default-toolbar-small x-noicon x-btn-noicon x-btn-default-toolbar-small-noicon">
<TABLE>
<TBODY>
<TR>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: 0px -6px" id=button-1141-frame1TL class="x-frame-tl x-btn-tl x-btn-default-toolbar-small-tl x-btn-default-toolbar-small-noicon-tl" role=presentation></TD>
<TD style="BACKGROUND-POSITION: 0px 0px; HEIGHT: 3px" id=button-1141-frame1TC class="x-frame-tc x-btn-tc x-btn-default-toolbar-small-tc x-btn-default-toolbar-small-noicon-tc" role=presentation></TD>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: right -9px" id=button-1141-frame1TR class="x-frame-tr x-btn-tr x-btn-default-toolbar-small-tr x-btn-default-toolbar-small-noicon-tr" role=presentation></TD></TR>
<TR>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: 0px 0px" id=button-1141-frame1ML class="x-frame-ml x-btn-ml x-btn-default-toolbar-small-ml x-btn-default-toolbar-small-noicon-ml" role=presentation></TD>
<TD style="BACKGROUND-POSITION: 0px 0px" id=button-1141-frame1MC class="x-frame-mc x-btn-mc x-btn-default-toolbar-small-mc x-btn-default-toolbar-small-noicon-mc" role=presentation><EM id=button-1141-btnWrap><BUTTON hideFocus id=button-1141-btnEl class=x-btn-center role=button autocomplete="off"><SPAN id=button-1141-btnInnerEl class=x-btn-inner>Add</SPAN><SPAN id=button-1141-btnIconEl class="x-btn-icon x-hide-display">&nbsp;</SPAN></BUTTON></EM></TD>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: right 0px" id=button-1141-frame1MR class="x-frame-mr x-btn-mr x-btn-default-toolbar-small-mr x-btn-default-toolbar-small-noicon-mr" role=presentation></TD></TR>
<TR>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: 0px -12px" id=button-1141-frame1BL class="x-frame-bl x-btn-bl x-btn-default-toolbar-small-bl x-btn-default-toolbar-small-noicon-bl" role=presentation></TD>
<TD style="BACKGROUND-POSITION: 0px -3px; HEIGHT: 3px" id=button-1141-frame1BC class="x-frame-bc x-btn-bc x-btn-default-toolbar-small-bc x-btn-default-toolbar-small-noicon-bc" role=presentation></TD>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: right -15px" id=button-1141-frame1BR class="x-frame-br x-btn-br x-btn-default-toolbar-small-br x-btn-default-toolbar-small-noicon-br" role=presentation></TD></TR></TBODY></TABLE></DIV>
<DIV style="BACKGROUND-IMAGE: none; MARGIN: 0px; TOP: 0px; LEFT: 871px" id=button-1142 class="x-btn x-box-item x-toolbar-item x-btn-default-toolbar-small x-noicon x-btn-noicon x-btn-default-toolbar-small-noicon">
<TABLE>
<TBODY>
<TR>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: 0px -6px" id=button-1142-frame1TL class="x-frame-tl x-btn-tl x-btn-default-toolbar-small-tl x-btn-default-toolbar-small-noicon-tl" role=presentation></TD>
<TD style="BACKGROUND-POSITION: 0px 0px; HEIGHT: 3px" id=button-1142-frame1TC class="x-frame-tc x-btn-tc x-btn-default-toolbar-small-tc x-btn-default-toolbar-small-noicon-tc" role=presentation></TD>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: right -9px" id=button-1142-frame1TR class="x-frame-tr x-btn-tr x-btn-default-toolbar-small-tr x-btn-default-toolbar-small-noicon-tr" role=presentation></TD></TR>
<TR>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: 0px 0px" id=button-1142-frame1ML class="x-frame-ml x-btn-ml x-btn-default-toolbar-small-ml x-btn-default-toolbar-small-noicon-ml" role=presentation></TD>
<TD style="BACKGROUND-POSITION: 0px 0px" id=button-1142-frame1MC class="x-frame-mc x-btn-mc x-btn-default-toolbar-small-mc x-btn-default-toolbar-small-noicon-mc" role=presentation><EM id=button-1142-btnWrap><BUTTON hideFocus id=button-1142-btnEl class=x-btn-center role=button autocomplete="off"><SPAN id=button-1142-btnInnerEl class=x-btn-inner>Delete</SPAN><SPAN id=button-1142-btnIconEl class="x-btn-icon x-hide-display">&nbsp;</SPAN></BUTTON></EM></TD>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: right 0px" id=button-1142-frame1MR class="x-frame-mr x-btn-mr x-btn-default-toolbar-small-mr x-btn-default-toolbar-small-noicon-mr" role=presentation></TD></TR>
<TR>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: 0px -12px" id=button-1142-frame1BL class="x-frame-bl x-btn-bl x-btn-default-toolbar-small-bl x-btn-default-toolbar-small-noicon-bl" role=presentation></TD>
<TD style="BACKGROUND-POSITION: 0px -3px; HEIGHT: 3px" id=button-1142-frame1BC class="x-frame-bc x-btn-bc x-btn-default-toolbar-small-bc x-btn-default-toolbar-small-noicon-bc" role=presentation></TD>
<TD style="PADDING-LEFT: 3px; BACKGROUND-POSITION: right -15px" id=button-1142-frame1BR class="x-frame-br x-btn-br x-btn-default-toolbar-small-br x-btn-default-toolbar-small-noicon-br" role=presentation></TD></TR></TBODY></TABLE></DIV></DIV></DIV>
<DIV style="WIDTH: 1652px; TOP: 27px; LEFT: 10px" id=headercontainer-1130 class="x-grid-header-ct x-grid-header-ct-default x-docked x-docked-top x-grid-header-ct-docked-top x-grid-header-ct-default-docked-top x-box-layout-ct" role=presentation>
<DIV style="WIDTH: 1648px; HEIGHT: 22px" id=ext-gen1158 class=x-box-inner role=presentation>
<DIV style="MARGIN: 0px; WIDTH: 330px; HEIGHT: 22px; TOP: 0px; LEFT: 0px" id=gridcolumn-1131 class="x-column-header x-unselectable x-box-item x-column-header x-unselectable-default x-column-header-align-left x-column-header-first" role=presentation>
<DIV style="HEIGHT: auto; PADDING-TOP: 0px" id=gridcolumn-1131-titleContainer class=x-column-header-inner><SPAN id=gridcolumn-1131-textEl class=x-column-header-text>Type</SPAN>
<DIV style="HEIGHT: 22px" id=gridcolumn-1131-triggerEl class=x-column-header-trigger></DIV></DIV></DIV>
<DIV style="MARGIN: 0px; WIDTH: 330px; HEIGHT: 22px; TOP: 0px; LEFT: 330px" id=gridcolumn-1132 class="x-column-header x-unselectable x-box-item x-column-header x-unselectable-default x-column-header-align-left" role=presentation>
<DIV style="HEIGHT: auto; PADDING-TOP: 0px" id=gridcolumn-1132-titleContainer class=x-column-header-inner><SPAN id=gridcolumn-1132-textEl class=x-column-header-text>Total</SPAN>
<DIV style="HEIGHT: 22px" id=gridcolumn-1132-triggerEl class=x-column-header-trigger></DIV></DIV></DIV>
<DIV style="MARGIN: 0px; WIDTH: 330px; HEIGHT: 22px; TOP: 0px; LEFT: 660px" id=gridcolumn-1133 class="x-column-header x-unselectable x-box-item x-column-header x-unselectable-default x-column-header-align-left" role=presentation>
<DIV style="HEIGHT: auto; PADDING-TOP: 0px" id=gridcolumn-1133-titleContainer class=x-column-header-inner><SPAN id=gridcolumn-1133-textEl class=x-column-header-text>Layer 1</SPAN>
<DIV style="HEIGHT: 22px" id=gridcolumn-1133-triggerEl class=x-column-header-trigger></DIV></DIV></DIV>
<DIV style="MARGIN: 0px; WIDTH: 329px; HEIGHT: 22px; TOP: 0px; LEFT: 990px" id=gridcolumn-1134 class="x-column-header x-unselectable x-box-item x-column-header x-unselectable-default x-column-header-align-left" role=presentation>
<DIV style="HEIGHT: auto; PADDING-TOP: 0px" id=gridcolumn-1134-titleContainer class=x-column-header-inner><SPAN id=gridcolumn-1134-textEl class=x-column-header-text>Layer 2</SPAN>
<DIV style="HEIGHT: 22px" id=gridcolumn-1134-triggerEl class=x-column-header-trigger></DIV></DIV></DIV>
<DIV style="MARGIN: 0px; WIDTH: 329px; HEIGHT: 22px; TOP: 0px; LEFT: 1319px" id=gridcolumn-1135 class="x-column-header x-unselectable x-box-item x-column-header x-unselectable-default x-column-header-align-left x-column-header-last" role=presentation>
<DIV style="HEIGHT: auto; PADDING-TOP: 0px" id=gridcolumn-1135-titleContainer class=x-column-header-inner><SPAN id=gridcolumn-1135-textEl class=x-column-header-text>Layer 3</SPAN>
<DIV style="HEIGHT: 22px" id=gridcolumn-1135-triggerEl class=x-column-header-trigger></DIV></DIV></DIV></DIV></DIV><LEGEND id=ext-gen1143 class="x-fieldset-header x-fieldset-header-default">
<DIV id=tool-1143 class="undefined x-tool x-tool-default" role=button><IMG id=tool-1143-toolEl class=x-tool-toggle role=presentation src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="></DIV>
<DIV id=component-1144 class="x-fieldset-header-text x-component x-component-default" role=presentation>Rates</DIV>
<DIV class=x-clear></DIV></LEGEND>
<DIV style="WIDTH: 982px; HEIGHT: 288px; TOP: 50px; LEFT: 0px" id=auctionrates-body class="x-fieldset-body x-layout-fit">
<DIV style="MARGIN: 0px; WIDTH: 1652px; HEIGHT: 338px; MozUserSelect: -moz-none; KhtmlUserSelect: none" id=gridview-1138 class="x-grid-view x-fit-item x-grid-view-default x-unselectable" role=presentation tabIndex=-1 unselectable="on"></DIV>
<DIV id=auctionRates class="x-panel x-grid x-panel-default">
<DIV id=auctionRates-body class="x-panel-body x-grid-body x-panel-body-default x-panel-body-default"></DIV></DIV>
<DIV id=ext-gen1178 class=x-clear role=presentation></DIV></DIV>

Looking forward to hear from you, lots of thanks!

tobiu
19 Dec 2011, 1:45 AM
the generated html is quite useless when it comes to debugging for us.
please provide some js code.

effectivewang
19 Dec 2011, 1:47 AM
Ext.define('auctions.Rate', {
extend : 'Ext.form.FieldSet',
alias : 'widget.auctionrates',
title : 'Rates',
id : 'auctionrates',
collapsible : true,
collapsed : false,
layout : 'anchor',
autoHeight: true,
items : [
{
xtype : 'grid',
id : 'auctionRates',
store : {
model : 'model.Rate'
},

columns : [ {
header : 'Type',
dataIndex : 'ratetype',
flex : 1,
editor: {
xtype: 'combobox',
typeAhead: true,
triggerAction: 'all',
selectOnTab: true,
store: [
['Regular','Regular'],
['Float','Float'],
['Floor Plan','Floor Plan'],
['Factory','Factory']
],
lazyRender: true,
listClass: 'x-combo-list-small'
}
}, {
header : 'Total',
dataIndex : 'ext',
flex : 1,
editor: {
allowBlank: true
}
},{
header : 'Layer 1',
dataIndex : 'layer1',
flex : 1,
editor: {
allowBlank: true
}
},{
header : 'Layer 2',
dataIndex : 'layer2',
flex : 1,
editor: {
allowBlank: true
}
},{
header : 'Layer 3',
dataIndex : 'layer3',
flex : 1,
editor: {
allowBlank: true
}
}],
tbar : [
'Rates',
{
xtype : 'button',
text : 'Add',
margin : '0 0 0 400',
handler : function() {
var r = Ext.create('model.Rate', {
});
Ext.getCmp('auctionRates').store.insert(0, r);
cellEditingRate.startEditByPosition({row: 0,column: 0});
}
},
{
xtype : 'button',
text : 'Delete',
handler : function() {
var selModel = Ext.getCmp('auctionRates')
.getSelectionModel();
if (selModel.hasSelection()) {
Ext.Msg.confirm("Alert",
"Are you sure to delete?",
function(button) {
if (button == "yes") {
var selection = selModel.getSelection();
Ext.getCmp('auctionRates').getStore().remove(selection);
}
});
} else {
Ext.Msg.alert("error",
"No one is selected!");
}
}
} ],
plugins: [cellEditingRate]
}]
});

tobiu
19 Dec 2011, 1:53 AM
why are you using layout anchor without setting anchors?
i would switch to layout 'fit' in case you just want to show one item.

i also strongly recommend to only set primitives as direct configs and put complex ones (objects, arrays,...) into the initComponent. otherwise they will get shared for all instances of that "class" (prototype) you create.

effectivewang
19 Dec 2011, 8:36 AM
Well, the reason why we use anchor is that this "Rate.js" view is part of the whole view, basically, the whole view contains 4 fileldsets, they are layout in vertical sequence.

What is strange is that, the up 2 fieldsets did not have problem, bottom 2 have issues. Like:



Fieldset 1


Fieldset 2


Fieldset 3 (with Issues on IE8/9)


Fieldset 4(with Issues on IE8/IE9)













And the layout works all fine on Firefox 8, the issue screenshot is on the top of this thread.


The objects and prototypes won't affect this issue, because the issue occour when the page is shown, by then, the objects and prototypes in tbar: function is still did not get executed.

effectivewang
20 Dec 2011, 1:20 AM
I looked into the code step by step and as what i mentioned in the top thread, the grid content is not rendered into the body element.

legend works fine, i have tested with Maxthon (IE mode) and IE as well.

Both are incorrect, i wonder if there is speical deal with IE, there are attributes on different IE mode or something.

Thanks a lot!

effectivewang
20 Dec 2011, 7:31 PM
I have solved the issue by change the grid name.

The reason why this is because the id of fieldset and grid are the same.

And IE8/9 are not case-sensitive, so the grid is rendered in fieldset element.