Method update error in extjs

Question

In my extjs project, I have a panel to which I show the toolbar on mouseEnter . This is working fine. But when I just update the panel with the new html, the mouseEnter event mouseEnter not work on it.

 panel.update('hello'); 

Then I realized through the Chrome developer tool that the update method erases the last nested inner div panel before applying new text to it (for example, “hello”).

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

This was the main reason that the mouseEnter event did not mouseEnter on the panel , because I think Ext cannot identify panel as a valid panel after the update() method.

In any case, I later resolved this issue by checking the panel variable in the Chrome console, as shown below.

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

The above implementation seems disgusting, but it worked for me. Any other good 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 updating :

 <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 in Sencha chat chat .

Answer 1

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

In the panel, you use the HBox or VBox layout, which adds additional HTML elements inside the main, as you noticed. If you call update() on an element of the main component, you delete the internal elements added by the layout, including those that the event handler listened to.

The solution is as follows:

• use a simpler layout in your panel, for example Auto;

or

• update inner element added by layout:

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

Answer 2

If you want to update the contents of the panel, you must call

 panel.body.update('hello'); 

This will update the content area item and will not spoil the integrity of the panel. As far as I know, calling the update directly on the panel is wrong, because the call to the function inherited from AbstractComponent does not take into account the internal structure of the panel and overwrites the essential layout of the panel.