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, Mar 25 '13 at 16:10
@ChrisFarmer I updated my post. please check. (I am creating the panel dynamically in the same controller.) — Mr_Green, Mar 26 '13 at 05:06
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, Mar 27 '13 at 00:01
@CD.. Ok I will try to create a simple fiddle. (I tried before but I failed to make it run in fiddle) — Mr_Green, Apr 05 '13 at 12:57
@CD.. I tried my best and created this [fiddle](http://jsfiddle.net/ptZp7/3/) which is unfortuanately not working. Eventhough, I made it clear in the fiddle what exactly the bug is. — Mr_Green, Apr 05 '13 at 13:18
@CD.. don't keep the events inside while declaring. I am assigning the events in Controller that's where the problem is occurring. — Mr_Green, Apr 05 '13 at 15:14
@CD.. Thanks for your efforts, I much appreciate it. This is working fine in fiddle. But I am sure it is not. I maybe missing some important point to mention. Anyway, you can see that when you use `update`, the panel is converting to two div's instead of three as I mentioned in my post. — Mr_Green, Apr 06 '13 at 18:00
well, lets try finding that missing point - try breaking the fiddle example. — CD.., Apr 06 '13 at 18:07
@CD.. Yes I am trying here. your fiddle looks perfectly as I did. I am sure this is not a silly mistake though. you can find me in this [chat room](http://chat.stackoverflow.com/rooms/23760/sencha). — Mr_Green, Apr 06 '13 at 18:21
@Mr_Green it is not possible to reproduce your problem; in detail I don't see how you get your first HTML code from a panel. Normally there is just one additional div applied to kill all floats. And this only before version 4.2. Your additional divs may depend on the Layout you use, can you provide more information here? In addition I really recommend you to try (use) version 4.2. I think you are still within the development process so this change should be possible for you. — sra, Apr 07 '13 at 06:24

score 3 · Answer 1 · answered Apr 11 '13 at 21:30

3

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

answered Apr 11 '13 at 21:30

Tobia

17,856
6
74
93

+1 You seems to be right. Let me check. Just a small question: Is this mentioned in the sencha docs? If so, please provide me the link :) – Mr_Green Apr 12 '13 at 04:28
The bounty is closing. so, I am giving you the points. I haven't checked it though. – Mr_Green Apr 12 '13 at 10:34
Thanks for the points. It's not explicitly mentioned in the docs, but they don't mention using `update()` on components or containers either. Fortunately ExtJS is open source, so it's relatively easy to understand what's going on in the code. – Tobia Apr 12 '13 at 15:29
yeah I agree with you. You can hang around in [sencha chat room](http://chat.stackoverflow.com/rooms/23760/sencha) whenever you are free. I think this room require help from sencha developers frequently. :) – Mr_Green Apr 12 '13 at 16:07
@Mr_Green I will take a look. Please be sure to mark this answer as accepted, unless you need more information. Thanks! – Tobia Apr 16 '13 at 09:53
As I said before that your solution seems to be right. But unfortunately, I never got time to check this. I will mark it as answer after checking it. – Mr_Green Apr 16 '13 at 10:12
1

I had a similar problem, using Update() with a template to display data. It looked like overflow or position in x-box-inner was preventing the display. Thanks to your post I changed hbox to auto and all is good!! – Barry May 03 '14 at 01:42

score -2 · Answer 2 · answered Apr 08 '13 at 14:03

-2

If you want to update the content of a panel, you should call

panel.body.update('hello');

This will update content area element only and will not ruin the panel integrity. As far as I know, calling update directly on panel is wrong, because call to function inherited from AbstractComponent will not take into account internal panel's structure and will overwrite essential panel's markup.

answered Apr 08 '13 at 14:03

the_virt

707
4
10

I tried this before. I was getting error - `object has no method update`. – Mr_Green Apr 08 '13 at 14:06
body - is a property of Panel of type Ext.dom.Element. Ext.dom.Element has member function update and this solution should work. I don't know your particular config and why it's not so, may be if you post an example of code where you do update I can help further? – the_virt Apr 08 '13 at 14:10
The thing is that it is working fine in [**fiddle**](http://jsfiddle.net/ptZp7/7/) but not in my project. I am sure that it is not a silly mistake. I am missing some important information to share with you guys. I will update my post tomorrow when I reach office. – Mr_Green Apr 08 '13 at 14:19

Update method bug in extjs

2 Answers2