PDA

View Full Version : [FIXED-EXTJSIV-1766][4.0.0] Ext.Img breaks all rendering in IE8



korax
26 Apr 2011, 2:08 PM
Ext.Img (http://docs.sencha.com/ext-js/4-0/api/Ext.Img) breaks all rendering in IE8 after it is shown. No other component instantiated after Ext.Img will render.


Ext.onReady(function() {
var changingImage = Ext.create('Ext.Img', {
src: 'http://www.sencha.com/img/20110215-feat-html5.png',
renderTo: Ext.getBody()
});

var panel = Ext.create('Ext.panel.Panel', {
height: 200,
width: 300,
html: 'I will not be seen in IE8.',
renderTo: Ext.getBody()
})
});

evant
26 Apr 2011, 5:10 PM
You can use the following workaround for now:



Ext.Img.override({
initRenderTpl: Ext.emptyFn,
});
Ext.onReady(function(){
var changingImage = Ext.create('Ext.Img', {
src: 'http://www.sencha.com/img/20110215-feat-html5.png',
renderTo: Ext.getBody()
});
});

korax
19 May 2011, 7:58 AM
This still breaks code in 4.0.1 with IE8, which stops executing at line 6452 of ext-all-debug.js with the message "Invalid target element for this operation".

evant
19 May 2011, 11:43 PM
Can't confirm this. When I run my code above (without the override) in IE8 it shows the image I would expect in 4.0.1.

korax
20 May 2011, 6:57 AM
Thanks.

tobiu
20 May 2011, 7:02 AM
why do you use


renderTo: Ext.getBody()


two times in a row? i don't think this is a good way to go.
have you tried out your example with 2 different containers to render to?


best regards
tobiu

korax
20 May 2011, 7:04 AM
why do you use


renderTo: Ext.getBody()


two times in a row?
Just for the example. No need to retest, thanks for the response.

korax
20 May 2011, 7:57 AM
Actually, this appears to be related to this bug (http://www.sencha.com/forum/showthread.php?130500-CLOSED-autoEl-with-tag-img-breaks-rendering-in-IE-8), which was never addressed, and which was the reason I started this thread after that one was closed. You can't define autoEl in a component and expect IE to render the rest of the page. The following code breaks IE8 with the above-mentioned error.


Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
height: 300,
width: 400,
title: 'Panel',
renderTo: Ext.getBody(),
items: [{
xtype: 'panel',
height: 50,
width: 100,
title: 'Nested 1',
html: 'I will be seen'
},{
xtype: 'component',
autoEl: {
tag: 'img',
src: 'http://www.sencha.com/img/20110215-feat-html5.png' // Any image, existing or not
}
},{
xtype: 'panel',
height: 50,
width: 100,
title: 'Nested 2',
html: 'I will not be seen in IE'
},{
xtype: 'component',
title: 'Nested 3',
html: 'I will not be seen in IE'
}]
});
});