javascript - 如何在 extjs4 中获取内部 div 元素子元素并处理事件

Question

I want to select the div with class "icon-right" and add the click event.
    Html code:
        <div class="msg"> 
           <div> 
               <div class="sample"></div> 
           </div>
           <div> 
              <div class="icon-right"></div> 
           </div> 
        </div>
    I want to select the div which has class icon-right and handle click event..
    Extjs code:
        var message = Ext.select('div:next(div.icon-right)');

        message.on('click', function () {
            alert('test msg');
        }, message);

但是我需要在单击时将带有图标-right 类的 div 更改为带有图标-left 的 div，现在当我单击图标-left 时，它会更改为带有类图标-right 的 div .. 反之亦然

Answer 1

你可以做：

Ext.select('.icon-right').up('div').on('click', function() {});

Answer 2

根据文档，Ext.select 返回一个CompositeElement或 DOM 元素的集合。您应该使用将返回 HTMLElement 的Ext.query，然后您可以定义onclick事件处理程序：

var target = Ext.query(".icon-right").pop(); // return the first div of the query
target.onclick = function(){ alert('clicked!'); }

或者，如果您希望使用 Ext 事件侦听器，则必须使用Ext.dom.Element 类，该类的实例由 返回，它根据文档Ext.get调用 ID、DOM 节点或现有元素。如果您要通过 检索元素，则可以像在提供的代码中那样分配一个侦听器。Ext.getExt.dom.Element.on

工作 jsFiddle： http: //jsfiddle.net/LcRWB/（显示两个示例）

Answer 3

这应该有效。

var el = Ext.Element.select("[class=icon-right]");
el.on('click', function() {
  alert("hi");
});

您可以在 jsfiddle http://jsfiddle.net/XzKKZ/上看到一个示例