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

Posted 2023-02-26

【中文标题】是否真的所有 ExtJS 组件都没有点击事件

【英文标题】：Is there really no click event for all ExtJS components

【发布时间】：2012-08-16 15:02:15

【问题描述】：

我正在学习 extjs 4.1，但我在大多数组件上都找不到点击事件 - 我是瞎子还是无法对按钮以外的其他组件的点击做出反应？

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

【问题讨论】：

需要点击事件的组件有buttons这样的事件。您具体指的是哪些组件？

面板、组合框...每个具有图形表示的组件都需要点击事件

点击面板和组合框由 ExtJS 在内部处理，因为 ExtJS 定义了用户点击面板（其标题、工具按钮等）或组合框时发生的各种行为或其触发器。您是否将其与还有 click 事件的 dom 元素混淆了？

我没有混淆任何东西 - 为什么我不能将自己的句柄用于也由 ExtJS 处理的事件？

这是因为 ExtJS 组件不会解析为单个 dom 元素。事实上，它可以由几十个这些组成。所以点击面板并没有完全定义——点击在哪里？关于内容？在标题栏上？在工具栏上？页脚？可调整大小布局中的拖动处理程序？ ExtJS 组件需要响应各种点击事件来完成它们的任务。您可以随时点击 dom 元素事件单击，就像您接受的答案一样。

【参考方案1】：

每个组件都可以在元素级别公开点击事件。像Ext.button.Button 这样的一些组件在组件级别有一个点击事件。

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

  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

【讨论】：

此配置中元素参数的其他选项是什么？

【参考方案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 的类的所有组件（所有可见组件）执行此操作。我以前没做过，所以你必须玩弄它。

【参考方案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");
    
);

【讨论】：

我很好奇你为什么认为这是最干净的。这似乎也是对mon 的滥用。 mon 用于在项目被销毁时移除监听器，因为当组件被销毁时元素将被销毁，它在这里没有做任何额外的事情。

你在想mun（删除托管侦听器的简写）

嗯，不，来自文档：mon addManagedListener Adds listeners to any Observable object (or Ext.Element) which are automatically removed when this Component is destroyed.的简写

【参考方案4】：

如果你只听点击事件，你也可以这样做

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

如果您需要侦听 Ext.dom.Element 不触发的事件，您需要将其附加到“渲染”侦听器中，就像其他人建议的那样。