extjs - 从 extjs 中的控制器更改 html

Question

在我的 Extjs 4.1.1a 项目中，

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

我正在使用更改 HTML（在控制器中）值

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

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

我什至尝试过：

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

当我尝试时：

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

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

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

---

Answer 1

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

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

最好不要使用 绕过 ExtJS 组件更新机制innerHTML，这样会比较混乱。也就是说，请注意您混淆了两个不同的属性，它们实际上具有相同的名称（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
        }
    }
});

});