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

我的猜测是在执行JS代码后呈现html p-tag。真的吗？我认为脚本是通过操作执行的，而htmlcode是在js-code之上，这让我很困惑。

我试图将javascript放在html / tpl标签中（在配置中）。它会删除错误，但不会写出任何内容。为什么？一切都按顺序执行，我该如何解决？

Answer 1

我假设您要在b

中分配<p id="time"></p>值

，因为您的<p id="time">0</p>值始终为0，所以最终结果应该与b类似。

首先，为您的小组提供itemId：

itemId: 'test'

然后您可以使用以下方法引用该面板的dom元素：

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

并使用innerText而不是innerHTML设置值：

panel.innerText = b;

顺便说一句，请记住，因为您没有使用任何商店，所以data配置是强制性的

以下是演示：http://www.senchafiddle.com/#Y30Ul

Sencha Touch 2 - 执行顺序/优先级

1 个答案: