更新extjs中的方法错误

Question

在我的extjs项目中,我有一些panel我toolbar在mouseEnter活动中展示的东西.这工作正常.但是当我刚用新的html更新面板时,mouseenter事件就不起作用了.

panel.update('hello');

然后我通过Chrome开发人员工具意识到该update方法正在擦除最后一个嵌套的div内部面板,然后再将新文本写入其中(即'hello').

每个面板都有3/4嵌套div,但是当我们使用update()时,面板只有2嵌套的div？

这是没有调用mouseenter事件的主要原因,panel因为我认为Ext无法panel在update()方法之后将其识别为有效面板.

无论如何,后来我通过检查panelchrome控制台中的变量解决了这个问题,如下所示.

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

上面的实现看起来很恶心,但它对我有用.还有其他好办法吗？

编辑:

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

更新前:

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

更新后:

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

我在Sencha聊天室可用.

Answer 1

如果你想更新面板的内容，你应该调用

panel.body.update('hello');

这将仅更新内容区域元素，并且不会破坏面板的完整性。据我所知，直接在面板上调用 update 是错误的，因为调用从 AbstractComponent 继承的函数不会考虑内部面板的结构，并且会覆盖基本面板的标记。