CODEWITHSUNDEEP
javascripthtmlajaxextjssencha-touch-2
user1686573
user1686573

Reputation: 31

Unable to run javascript using Ext.Ajax in Sencha-Touch2?

I am using htmlPanel.js in Sencha-Touch which was discussed in the Forum here to display local html content. I am able to load the html content with normal html tag, but not the javascript.

Below is the htmlPanel.js I used:

Ext.define('HTMLPanel', {
    extend: 'Ext.Panel',


// We are using Ext.Ajax, so we should require it
    requires: ['Ext.Ajax'],
    config: {
        listeners: {
            activate: 'onActivate'
        },


// Create a new configuration called `url` so we can specify the URL
        url: null        
    },


    onActivate: function(me, container) {
        Ext.Ajax.request({
// we should use the getter for our new `url` config
            url:    'htmlTest.html',//this.getUrl(),
            method: "GET",
            success: function(response, request) {
// We should use the setter for the HTML config for this
//Ext.Msg.alert('Alert', 'Success!!!', Ext.emptyFn);    
                me.setHtml(response.responseText);                
            },
            failure: function(response, request) {
//Ext.Msg.alert('Alert', 'Failure!!!', Ext.emptyFn);    
                me.setHtml("failed -- response: " + response.responseText);
            }
        });
    }
});

Below is my htmlTest.html:

<!DOCTYPE html>
<html>
    <body>

        <canvas id="myCanvas">Your browser does not support the HTML5 canvas tag.</canvas>

        <script type="text/javascript" charset="utf-8">
            var c=document.getElementById('myCanvas');
            var ctx=c.getContext('2d');
            ctx.fillStyle='#FF0000';
            ctx.fillRect(0,0,640,1280);
        </script>

        <h1>This is some text in a paragraph.</h1>

    </body>
</html>

And below is my index.js:

Ext.application({
    name: 'SampleLoad',
    launch: function () {
        //loadURL('htmlTest.html');
        Ext.Viewport.add({
                        url:    'htmlTest.html',
            xclass: "HTMLPanel",

        });

        // Add the new HTMLPanel into the viewport so it is visible
        Ext.Viewport.add(HTMLPanel);
    }
});

I am able to see the text "Some text is here.", but not the canvas that I tried to create using javascript.

Is there any config that needs to be specified? Or any other cause?

Thanks.

Upvotes: 3

Views: 565

Answers (1)

Pum Walters
Pum Walters

Reputation: 339

The problem is that HTML is implanted in the DOM but scripts aren't executed. This is the case for assignment to innerHtml and probably also for setHtml().

You can solve this by explicitly executing the scripts in the rendered element, immediately after splicing the HTML in. Your htmlPanel.js would then look like:

...
// We should use the setter for the HTML config for this
//Ext.Msg.alert('Alert', 'Success!!!', Ext.emptyFn);    
                me.setHtml(response.responseText);  
                var scriptArray = me.renderElement.dom.getElementsByTagName("script");   
                for(var i=0;i<scriptArray.length;i++) {  
                   eval(scriptArray[i].text);  
                }              
            },
...

Upvotes: 5

Related Questions