PDA

View Full Version : Element.createChild() fails on IE9 with HTML 5 tag



xymovie
21 Jun 2011, 9:19 AM
I have following code to generate HTML 5 element(canvas, video) dynamically, it works on Firefox 3.6.17 and Chrome 12.0712.0 dev. But it cannot generate element under IE 9.



var myDiv1 = Ext.get('div5');
myDiv1.createChild({
tag : 'canvas',
html: "html"
});
Result in FF and Chrome:


<div id="div5" class="myDiv"><canvas id="ext-gen3">html</canvas></div>
Result in IE 9:


<DIV id=div5 class=myDiv>html</CANVAS></DIV>


Is this a bug of IE 9 or ExtJS? Any workaround solution? Thanks.

Ext Js: 3.1.1
OS: Windows 7 Enterprise
IE version: 9.0.8112.16421
Firefox 3.6.17
Chrome 12.0712.0 dev

xymovie
21 Jun 2011, 9:25 AM
I Test following HTML 5 video panel it fails on IE 9 as well.


HTML5 VideoPanel based on Xantus's blog posting. (http://www.sencha.com/forum/showthread.php?90379-HTML5-VideoPanel-based-on-Xantus-s-blog-posting.)

skirtle
23 Jun 2011, 3:17 AM
ExtJS 3.1.1 does not support IE9. Could you try this with ExtJS 3.4?

xymovie
23 Jun 2011, 10:48 AM
ExtJS 3.1.1 does not support IE9. Could you try this with ExtJS 3.4?
Thanks for the suggestion; still no luck on ExtJS 3.4. Same problem as using ExtJS 3.1.1

skirtle
24 Jun 2011, 3:48 AM
Interesting. I don't have a copy of IE9 to hand but it sounds like something worth posting in the bugs forum if it doesn't work with the latest version of Ext.

Does it work if you leave out the html option?

Can you successfully create a canvas using the update() method instead of createChild()?

xymovie
24 Jun 2011, 10:27 AM
Even worse after removed the html option or used update():
No canvas tag even not created:

<div id="div5" class="myDiv"></div>

with update():

myDiv1.update('<canvas></canvas>');

xymovie
24 Jun 2011, 10:44 AM
I can use following pure javascript creates canvas in IE 9:
1. document.write("<canvas id='myCanvas'></canvas>")
2. document.createElement("canvas")
3. Change the element.innerHTML= "<canvas id='canvas2'></canvas>";

It suppose ExtJs should use one of above methods internally....:-/



<body>

<script type="text/javascript">

document.write("<canvas id='myCanvas'></canvas>");
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#00FF00';
ctx.fillRect(0,0,80,100);

org_div1 = document.getElementById("org_div1");

canvasTag = document.createElement("canvas");
ctx=canvasTag.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
document.body.insertBefore(canvasTag, org_div1);

canvasTag = document.createElement("div");
canvasTag.innerHTML = "<canvas id='canvas2'></canvas>";
document.body.insertBefore(canvasTag, org_div1);
var canvas=document.getElementById('canvas2');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#0000FF';
ctx.fillRect(0,0,80,100);

</script>
<div id="org_div1"></div>

</body>

skirtle
26 Jun 2011, 3:27 AM
That is very suspicious. If you take a look at the update() method you'll find all it does to inject the HTML is set the innerHTML. I suggest stepping in with a debugger, it looks like there's something else going on here.

xymovie
27 Jun 2011, 6:38 AM
Finally figured out the problem!!!
I have to add <!doctype> directive in my html file then all js script execute correctly.

<!DOCTYPE HTML>Without <!doctype> directive in html file, even in the IE debug mode, you can not change element's innerHTML value to any HTML 5 tag, the debugger shows "" after you input "<canvas></canvas>". But it works when you input HTML 4 tags like "<div></div>".

According to Microsoft tech page -Defining Document Compatibility:
http://msdn.microsoft.com/en-us/library/cc288325%28v=vs.85%29.aspx

In many cases, it is best to use the <!doctype> directive to specify a standards-based document type, such as the HTML5 document type shown in the following example.Thanks Skirtle for the help and anyone who looked at this thread :)