PDA

View Full Version : Grid in IFRAME is visible in FF,IE8,GCh, but not in IE9



jumpow
19 Jul 2013, 12:08 AM
There is very simple page
<HTML>
<BODY>
<IFRAME NAME='Report' id='Report' width='948' height='100%' src='Grid2.html' scrolling='YES'></IFRAME>
</BODY>
</HTML>

and grid
<HTML><HEAD><TITLE>Statistic
</TITLE>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<link rel='stylesheet' type='text/css' href='Reports.css'>
<link rel='stylesheet' type='text/css' href='extjs/resources/css/ext-all.css'>
<script type='text/javascript' src='extjs/ext-all-debug.js'></script>
<script type='text/javascript' src='extjs/locale/ext-lang-ru.js'></script>
</HEAD>
<BODY>
<script>
Ext.application(
{
name: 'Statistic',
launch: function()
{
Ext.BLANK_IMAGE_URL='extjs/resources/s.gif';
Ext.onReady(function()
{
//------------------------------------------------------------------------
var repData =
[
['24.12.2012', '14.25', 'Sells', '89987654645', 'ABCDE', '1', '1', '29993'],
...(33 rows)
['24.12.2012', '14.25', 'Sells', '89987654645', 'ABCDE', '1', '33', '29993']
];
var store = Ext.create('Ext.data.ArrayStore',
{
fields:
[
{name: 'CallDate'},
{name: 'CallTime'},
{name: 'Route'},
{name: 'Phone'},
{name: 'EQID'},
{name: 'Codes', type: 'int'},
{name: 'FR', type: 'int'},
{name: 'VDN'}
],
data: repData
});
var grid = Ext.create('Ext.grid.Panel',
{
store: store,
stateful: true,
stateId: 'stateGrid',
autoScroll:true,
columns:
[
{
text : '???? ??????', width: 75, sortable : true,
dataIndex: 'CallDate'
},
{
text: '????? ??????', width: 75, sortable : true,
dataIndex: 'CallTime'
},
{
text : '????? ?????????????',width: 200,
sortable : false, dataIndex: 'Route'
},
{
text : '????? ???????? ???????',width: 200,
sortable : true, dataIndex: 'Phone'
},
{
text : 'EQ_ID', width: 75, sortable : true,
dataIndex: 'EQID'
},
{
text : '???? ??????????', width: 75,sortable:true,
dataIndex: 'Codes'
},
{
text : 'FR',width: 75, sortable: true,
dataIndex: 'FR'
},
{
text : 'VDN', width: 75,sortable : true,
dataIndex: 'VDN'
}
],
height: 700,
width: 900,
viewConfig:
{
stripeRows: true
}
});
var portal = new Ext.Viewport(
{
layout: 'border',
autoScroll:true,
renderTo: 'SJAggReport',
fit:1,
items:
[
{
id: 'JSCenter',
region: 'center',
layout: 'vbox',
margins: '2 2 0 0',
items:
[
grid
]
}
]
});
//------------------------------------------------------------------------
});
}
});
</script>
<DIV id='SJAggReport'></DIV>
</BODY></HTML>

Grid is visible in FireFox, IE8, GoogleChrom, but in IE9 I see empty screen... Why?

tvanzoelen
19 Jul 2013, 1:18 AM
Probably because you have set the onReady function within the application launch function.

Switch it and create the application within the onReady function. Or skip the onReady function because launch is called after the page is loaded.

Probably IE9 has a call to launch before the onReady event.

jumpow
21 Jul 2013, 8:52 AM
I have removed Ext.onReady(function() {}
No chanhges happen - FireFox (Windows 7, Windows XP),
Internet Explorer 8, Google Chrom show grid (both - Windows XP).
Internet Explorer 9 (Windows 7) shows empy page.

jumpow
25 Jul 2013, 1:10 AM
Suddenly I found source of problem - comma.
As I understood, in some cases IE does not show errors and does not show page...
Especially it happens, if code is included in HTML page.

When I moved script code to separate js file, Eclipse showed me error with comma.
After removing comma page appears in IE9.

Interesting, that IE8 showed page with this error...