在extjs中更改控制器中的html

Question

在我的Extjs 4.1.1a项目中，

Fiddle （这个小提琴不起作用，仅供参考）

我正在使用

更改HTML（控制器中）值

Ext.apply(weekNotifications,{html: {"hello"});

但是页面（视图）没有更新。当我在Chrome控制台中检查变量weekNotifications时，在上面的函数之后，innerHTML是“hello”，因为我添加了weekNotifications.el.dom.innerHTML是“Notifications here”（旧文本）。< / p>

我甚至尝试过：

weekNotifications.update("Hello");   //same problem as stated above

当我尝试时：

weekNotifications.el.dom.innerHTML = "hello";

我收到错误 - 无法调用未定义的dom

为了更好地理解，我正在粘贴console.log(weekNotifications)

的图像

---

Answer 1

问题是当我尝试更改html时，未呈现变量weekNotification。所以我做了以下哪些对我有用：

weekNotifications.on(
      'render',
      function(self){
         self.update("hello");
      },
      this
);

Answer 2

正如我在评论中所说的那样，你会以某种方式获得对错误组件的引用。 update是正确的使用方法：

Ext.require('*');

Ext.onReady(function() {

    var ct = new Ext.container.Container({
        renderTo: document.body,
        html: 'Foo'
    });

    setTimeout(function(){
        ct.update('Bar');
    }, 500);

});

Answer 3

最好不要使用innerHTML绕过ExtJS组件更新机制，这会让人感到困惑。也就是说，请注意您混淆了两个实际上具有相同名称（innerHTML）但由不同类型的对象拥有的不同属性。你在第一张图片中加下划线的那个并不是你想象的本机DOM节点所拥有的，所有者实际上是一个ExtJS对象（看一下“xtype”属性）。这意味着您没有与DOM对象进行交互，因此，更新其innerHTML属性不会产生任何效果。

Answer 4

您是否尝试在渲染组件后更改html（它确保html已准备好使用或进行更改）。如下所示

Ext.require('*');

Ext.onReady(function() {

var ct = new Ext.container.Container({
    renderTo: document.body,
    html: 'Foo',
    listeners:{
        afterrender:function(ct){
            ct.el.dom.innerHTML = "hello"; //works
           // ct.update('Bar');  //works
        }
    }
});

}）;