change the html from controller in extjs

Question

In my Extjs 4.1.1a project,

Fiddle (this fiddle is not working, it is just for reference)

I am changing the HTML(In controller) value using

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

But the page(view) is not updating. When I checked the variable weekNotifications in Chrome console, after the above function, the innerHTML is "hello" as I added but in weekNotifications.el.dom.innerHTML is "Notifications here" (old text).

I even tried:

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

When I tried:

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

I am getting error - Cannot call dom of undefined

For better understanding, I am pasting the images of console.log(weekNotifications)

---

Answer 1

The problem was that the variable weekNotification was not rendered when I was trying to change the html. So I did the following which worked for me:

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

Answer 2

As I said in the comment, you're getting a reference to the wrong component somehow. update is the correct method to use:

Ext.require('*');

Ext.onReady(function() {

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

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

});

Answer 3

have you tried changing the html after render of the component(it ensures that the html is ready for using or making changes).like below

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

});

Answer 4

It would be better not to bypass the ExtJS component update mechanism using innerHTML, this will be confusing. That said, note that you confuse two different properties which have effectively the same name (innerHTML) but are owned by objects of different types. The one you have underlined in the first picture is not owned by a native DOM node as you seem to believe, the owner is actually an ExtJS object (take a look at the "xtype" property). This means that your are not interacting with a DOM object, so, updating its innerHTML property produces nothing.