extjs - extjs 中的更新方法错误

Question

在我的 extjs 项目中，我有一些 panel我要展示的toolbar在 mouseEnter事件。这工作正常。但是当我用新的 html 更新面板时，mouseenter事件不起作用。

panel.update('hello');

然后我通过 Chrome 开发者工具意识到 update方法正在删除最后一个嵌套的 div在将新文本写入面板之前(即“你好”)。

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

这是未调用 mouseenter 的主要原因。 panel 上的事件因为我认为 Ext无法识别 panel作为 update() 之后的有效面板方法。
无论如何，后来我通过检查 panel 解决了这个问题。 chrome 控制台中的变量，如下所示。

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 chat room .

Answer 1

您的事件处理程序停止工作，因为您的 update()删除面板布局添加的内部元素。

正如您所注意到的，您在面板上使用了 HBox 或 VBox 布局，这会在主布局中添加额外的 HTML 元素。如果您调用update()在主组件的元素上，您删除布局添加的内部元素，包括事件处理程序正在监听的元素。

解决方案是:

在面板上使用更简单的布局，例如 Auto；

或者

更新布局添加的内部元素:

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