CODEWITHSUNDEEP
extjssencha-touch-2
Thomas
Thomas

Reputation: 87

Sencha Touch 2 - Execution order/priority

I am building a testscript that starts a timer, executes some random operations and then closing the timer and reporting how long it took to execute. This is what I got so far:

Ext.define('project.view.test', {
extend: 'Ext.Panel',
xtype: 'test',

config: {
    styleHtmlContent: true, 
    scrollabe: 'vertical',
    title: 'test',
    tpl: '<p id="time"></p>'
},
initialize: function() {
    this.measureTime();
},
measureTime: function() {
    var startTime=new Date();
    a = 2;
    for(i=0; i<1000; i++) {
        a = a*a*a*i;
    }
    var b=Math.floor((new Date()-startTime)/100)/10;
    document.getElementById('time').innerHTML = b;
}

});

The problem here is that I get the error:

Uncaught TypeError: Cannot set property 'innerHTML' of null

My guess here is that the html p-tag is rendered after the JS-code is executed. Is that true? I thought the script were executed operation by operation and the htmlcode is above the js-code which makes me alittle confused.

I've tried to put the javascript within the html/tpl tag (in the config). It removes the error but nothing is written out instead. Why? What order does everything execute and how do I fix this?

Upvotes: 0

Views: 432

Answers (1)

Eli
Eli

Reputation: 14827

I assume you want to assign b value inside <p id="time"></p>

which your final result should look like this <p id="time">0</p> since your b value always being 0.

Firstly, give your panel an itemId:

itemId: 'test'

Then you can reference dom element of that panel using:

var panel = Ext.ComponentQuery.query('#test')[0].element.dom;

and set the value using innerText instead of innerHTML:

panel.innerText = b;

Btw, remember that since you're not using any store so data config is compulsory

Here is the demo: http://www.senchafiddle.com/#Y30Ul

Upvotes: 2

Related Questions