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()方法。

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

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

Answer 2

如果您想更新面板的内容，请致电

panel.body.update('hello');

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

更新extjs中的方法错误

2 个答案: