PDA

View Full Version : IE8 grid load makes page disappear



ID91
25 Jul 2012, 5:23 AM
I have a web application that includes an ExtJS 4.1 grid.
I create the grid(and it is rendered right), but when I load the store, the whole page disappears. I have added a load listener on the store and it seems that the results are received successfully.
This problem occurs only in IE8, Chrome and FireFox display everything right.
How should I fix this?

Farish
25 Jul 2012, 6:00 AM
is there any error message in IE? look at the bottom left corner. If there is an error, there is an icon there on which you can click and see the errors.

friend
25 Jul 2012, 6:04 AM
Internet Explorer is notorious for puking on dangling commas.

Cut and paste your code into http://www.jsonlint.com and see if it validates.

ID91
25 Jul 2012, 6:08 AM
There is no error message. The page just becomes blank all of a sudden when the results should be displayed.

scottmartin
25 Jul 2012, 7:48 AM
Do our online grid examples load in your IE8?

It sounds like you have a syntax error as mentioned. Is this small example that can posted for us to review? you can use array data or post the JSON to loading data.

Scott.

ID91
26 Jul 2012, 4:22 AM
I have managed to solve this problem.
The problem was that I was also using PIE(http://css3pie.com/) and had customized the strong tag so that it had a shadow and rounded corners. One of the grid's fields had a few strong tags. It seems that the existence of more than one such tag in one cell makes IE8 crash(or something similar), hence the aforementioned problem.

Have you faced this problem before?

Is there a way to make these two libraries work together on IE8?

scottmartin
26 Jul 2012, 6:20 AM
I have not tried using this library in conjunction with ExtJS. I would suggest looking at our internal CSS/SASS options for this .. for example:

FYI: IE has a special set of rules in many instances.

// simple styling for a panel (taken from ext4all)


var main = Ext.widget('panel', {
border: false,
renderTo: Ext.getBody(),
width: 300,
margins: '5 5 5 5',
html: 'Panel with CSS 3 Shadow and Rounded Corners',
style: {
'background-color': '#fff',
'padding': '20px',
'border-radius': '4px 4px 4px 4px',
'box-shadow': '0 0 2px rgba(0, 0, 0, 0.3)'
},
bodyStyle: {
'color': '#646464'
}
});
‚Äč

In css:



x-panel.rounded-panel
{
border-radius: 4px 4px 4px 4px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}


Scott.

ID91
26 Jul 2012, 6:52 AM
The problem does not lie with the creation of the grid.
The problem is that after the grid is created, I load it's store. Among the received text, there are cells containing more <strong> tags. These tags should be rendered by PIE, making the text have some CSS3 specifications.

So, while the grid tries to populate itself with the results, PIE kicks in and tries to render the text within the <strong> tags. I think this makes IE8 crash.