Sencha Touch 2 - Порядок выполнения/приоритет

Question

Я строю тест-скрипт, который запускает таймер, выполняет некоторые случайные операции, а затем закрывает таймер и сообщает, сколько времени потребовалось для выполнения. Это то, что я до сих пор:

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; 
} 

}); 

Проблема здесь в том, что я получаю ошибку:

Uncaught TypeError: Cannot set property 'innerHTML' of null 

Моя догадка, что HTML р-тег визуализируется после JS-кода казнены. Это правда? Я думал, что сценарий был выполнен с помощью операции, а htmlcode находится выше js-кода, что делает меня довольно запутанным.

Я попытался поместить javascript в тег html/tpl (в конфиге). Он удаляет ошибку, но ничего не выписывается. Зачем? Какой порядок выполняет все и как это исправить?

Answer 1

Я предполагаю, что вы хотите назначить b значение внутри <p id="time"></p>

который ваш конечный результат должен выглядеть следующим образом <p id="time">0</p> поскольку ваше значение b всегда равным 0.

Во-первых, дайте панель itemId:

itemId: 'test' 

Затем вы можете ссылаться на элемент dom этой панели, используя:

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

и установите значение, используя innerText вместо innerHTML:

panel.innerText = b; 

Btw, помните, что, так как вы не используете какой-либо магазин, так data конфигурации является обязательным

Вот демо: http://www.senchafiddle.com/#Y30Ul