Update method bug in extjs

Question

In my extjs project, I have some panel's to which I am showing toolbar on mouseEnter event. This is working fine. But when I just update the panel with new html then the mouseenter event is not working on it.

panel.update('hello');

Then I realised through Chrome developer tool that the update method is erasing the last nested div inside panel before writing the new text to it (ie 'hello').

Each panel has 3/4 nested div's but when we use update(), the panel has only 2 nested div's?

This was the main reason which was not invoking the mouseenter event on the panel because I think the Ext is unable to identify the panel as a valid panel after update() method.

Anyway, later I solved this issue by checking the panel variable in chrome console like below.

panel.body.dom.childNodes[0].children[0].childNodes[0].data = 'hello';

The above implementation looks disgusting but it worked for me. Any other nice way to do this?

Edit :

//In controller
this.control({          
   '#monthCalendar>panel>panel': {
        render: function(container){
             container.on('mouseenter',function(){                              
                  //do something here                                   
             },container,{element: 'el'});
        }
    }
})

Before Update:

<div class="x-panel x-box-item x-panel-default" id="panel-1078" style="left: 870px; top: 0px; margin: 0px; width: 174px; height: 52px;">
      <div id="panel-1078-body" class="x-panel-body x-panel-body-default x-panel-body-default x-box-layout-ct" style="width: 174px; height: 52px; left: 0px; top: 0px;">
           <div id="panel-1078-innerCt" class="x-box-inner " role="presentation" style="height: 50px; width: 172px;">
               <div id="panel-1078-targetEl" style="position: absolute; width: 172px; left: 0px; top: 0px; height: 1px;">
                    March 01
               </div>
           </div>
      </div>
</div>

After update:

<div class="x-panel x-box-item x-panel-default" id="panel-1078" style="left: 870px; top: 0px; margin: 0px; width: 174px; height: 52px;">
      <div id="panel-1078-body" class="x-panel-body x-panel-body-default x-panel-body-default x-box-layout-ct" style="width: 174px; height: 52px; left: 0px; top: 0px;">
          February 01
      </div>
</div>

I am available on Sencha chat room.

Can you show some code for how you're creating the panel and using the mouse events? — Chris Farmer
@ChrisFarmer I updated my post. please check. (I am creating the panel dynamically in the same controller.) — Mr_Green
This sounds all too familiar - I had something very similar in the past, but then I realised that I did something wrong rather than Ext. Could you please post the 3 nodes you see before calling update? — Izhaki

Tobia Tobia · Accepted Answer · 2013-04-11T21:30:54

Your event handler stops working because your update() erases the inner elements added by the panel's layout.

You are using either HBox or VBox layout on your panel, which adds additional HTML elements inside the main one, as you noticed. If you call update() on the main component's element, you erase the inner elements added by the layout, including that on which your event handler was listening.

The solution is to either:

use a simpler layout on your panel, such as Auto;

or

update the inner element added by the layout:

panel.getLayout().targetEl.update('Updated');

Update method bug in extjs

2 Answers