0

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)

enter image description here

enter image description here

Mr_Green
  • 40,727
  • 45
  • 159
  • 271

4 Answers4

3

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
);
Mr_Green
  • 40,727
  • 45
  • 159
  • 271
0

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

});
Evan Trimboli
  • 29,900
  • 6
  • 45
  • 66
  • As always, I think I done something wrong then. I am getting variable by doing this `var weekNotifications = Ext.getCmp('compIdHere').query('container>container')[1]`. Is there anything wrong in it? Please response, I wasted lot of time on it. – Mr_Green Mar 20 '13 at 09:11
  • Well... it's sort of an odd query. You said get all the containers that are a direct child of a container that are inside `notificationViewInner` and get the item at the 2nd index in the array. – Evan Trimboli Mar 20 '13 at 09:12
  • Yes, thats what I meant. all other index value components are working well. (means not changing html but adding dynamic child items to them) – Mr_Green Mar 20 '13 at 09:15
  • Well, it's not the one you're looking for, otherwise it would be updated. If you can put together a small working test case I'll look at it, otherwise it's just speculating about what might be in your code. Also, by putting together a test case you'll likely figure it out yourself. – Evan Trimboli Mar 20 '13 at 09:18
  • Here is the [link to the view of my page](https://gist.github.com/venkateshwar/db5d34a00e911dccfc72). I am trying to create a fiddle now which not happening(I don't know why) – Mr_Green Mar 20 '13 at 09:26
  • I created the fiddle, but it is not working. please check. http://jsfiddle.net/cuJ5S/1/. I hope this you can understand. Please help. – Mr_Green Mar 20 '13 at 09:37
  • Yes but that is what I have implemented in my code. (I tried adding `renderTo: Ext.getBody()` to make it work in fiddle, but no use). This is working good in my project. – Mr_Green Mar 20 '13 at 09:42
0

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.

  • Then please tell me how to change the html ? Here I am getting the variable through `ComponentQuery`. – Mr_Green Mar 20 '13 at 10:09
  • @Mr_Green Please simplify your jsFiddle example. –  Mar 20 '13 at 10:13
  • That is my complete code in my project. It is not working in fiddle. (I don't know why). – Mr_Green Mar 20 '13 at 10:15
  • @Mr_Green Try to shorten your jsFiddle code. Trust me, it's good way to isolate the origin of the problem - and to take care of our eyes :) –  Mar 20 '13 at 10:35
  • I made it smaller, you can understand it but can't run it. http://jsfiddle.net/cuJ5S/2/ – Mr_Green Mar 20 '13 at 10:42
  • wared, That code is just for reference. I have no typos in my code. Anyway, I update my fiddle http://jsfiddle.net/cuJ5S/4/ – Mr_Green Mar 20 '13 at 10:58
  • wared, It was simple error. The container which I was calling was not rendered. so, I just called `weekNotifications.on('render',function(){},this);` .this worked :) – Mr_Green Mar 20 '13 at 11:51
  • In my point of view you didn't provide sufficient efforts to guide us. –  Mar 20 '13 at 12:51
  • But I just explained how I am getting the variable (`ComponentQuery`) and how I am trying to change the html. and also what efforts I did to try to change the html. I even provided you the full code fiddle(which was somehow not working, unfortunately). Anyway, Its alright. I added the answer to this post. and also in my opinion, one couldn't have expected this kind of solution. (which did by [evan trimboli in one of the previous posts](http://stackoverflow.com/a/15378750/1577396), which I thought that it is only for **stores**) – Mr_Green Mar 20 '13 at 13:00
0

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

});

Shakti Shrestha
  • 56
  • 3