7

在我的 extjs 项目中，我有一些要在活动中panel展示的 's 。这工作正常。但是，当我只是用新的 html 更新面板时，该事件就不起作用了。toolbarmouseEntermouseenter

panel.update('hello');

然后我通过 Chrome 开发工具意识到，该update方法是div在写入新文本之前擦除最后一个嵌套的内部面板（即“你好”）。

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

这是没有在 上调用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 聊天室有空。

4

2 回答 2

3

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

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

解决方案是：

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

或者

  • 更新布局添加的内部元素：

    panel.getLayout().targetEl.update('Updated');
于 2013-04-11T21:30:54.523 回答
-2

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

panel.body.update('hello');

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

于 2013-04-08T14:03:47.723 回答