Question

我正在学习extjs 4.1而且我找不到大多数组件上的点击事件 - 我是盲人还是我无法点击其他组件而不是按钮？

是什么原因？ HTML支持点击所有元素。

Answer 1

每个组件都可以在元素级别公开click事件。某些组件（如Ext.button.Button）在组件级别有一个click事件。

这是在面板上添加点击事件的好方法：

  new Ext.panel.Panel({
      listeners: {
          click: this.handlePanelClick,
          element: 'el'
      }
  });

编辑以回复评论

元素字符串是任何元素，它是组件的属性。

new Ext.panel.Panel({
listeners: {
    click: function() {
        alert('you clicked the body');
    },
    element: 'body'
}

}）;

Ext文档有更全面的解释http://docs.sencha.com/ext-js/4-1/#!/api/Ext.util.Observable-method-addListener

Answer 2

通过访问几乎所有可见组件在渲染后都包含的Ext.dom.Element对象，您可以非常轻松地添加任何DOM事件。

只需在afterrender事件中添加一个侦听器，将事件添加到dom对象。

Ext.create('Ext.panel.Panel', {
    // other panel configs ...
    listeners: {
       'afterrender': function(panel) {
           panel.el.on('click', function() {
               alert('clicked');
           });
        }
    }
});

我认为还有一种方法可以为扩展Ext.util.Observable（所有可见组件）的类的所有组件执行此操作。我之前没有这样做，所以你不得不玩弄它。

Answer 3

使用自引用托管侦听器（最干净的imo）：

Ext.create('Ext.panel.Panel', {
    listeners: {
       'afterrender': function(panel) {
           this.mon(this.getEl(), 'click', this.onClick, this)
        }
    },
    onClick: function() {
        alert("mmm mon mon mon");
    }
});

Answer 4

如果您只是在听点击事件，也可以这样做

    xtype: 'container',
    listeners: {
         el: {
             click: function() {
                  alert('I clicked');
              },
              scope: this
             }
     }

如果您需要收听Ext.dom.Element未触发的事件，您需要将其附加到'render'侦听器中，就像其他人建议的那样。

所有ExtJS组件都没有真正的点击事件

4 个答案: