ExtJS 将事件处理程序动态添加到列编辑器

Posted 2023-02-26

【中文标题】ExtJS 将事件处理程序动态添加到列编辑器

【英文标题】：ExtJS Dynamically add event handler to Column Editor

【发布时间】：2016-02-15 11:16:37

【问题描述】：

我想在加载时向列编辑器动态添加一个事件处理程序。它是在网格中填充任何数据之前。我无法像在普通组合框中找到的那样在列的编辑器属性（column.editor.on）上找到“on”方法。我正在使用最新的 ExtJS 6 版本。我已经定义了像

这样的列

    
        xtype: "gridcolumn",
        text: "Available?",
        draggable: false,
        lockable: false,
        hideable: false,
        dataIndex: "Availablility",
        editor: 
            xtype: "combobox",
            forceSelection: true,
            typeAhead: true,
            store: [["Y","Yes"],["N","No"],["U","Not known"]],
            queryMode: "local",
        
    

我在这里做错了吗？我假设编辑器组合框稍后在我们有数据并尝试在网格上编辑时被初始化。但我想在网格负载上动态设置一些事件。有办法吗？

更新： 'on' 方法在我们尝试编辑行时可用，但在初始加载网格时不可用。有没有办法在数据加载之前临时初始化编辑插件以附加事件处理程序？

【参考方案1】：

我可以为您提供两种解决方案：

通过编辑器的listeners 配置添加事件处理程序（实际上Ext.util.Observable.on 是Ext.util.Observable.addListener 和listeners 属性使用addListeners 的别名）。

一个包含一个或多个事件处理程序的配置对象，在初始化期间要添加到该对象。这应该是 addListener 示例中指定的有效侦听器配置对象，用于一次附加多个处理程序。

在你的控制器中监听这个组合事件，比如

'myGrid 组合[name=myCombo]': 更改：this.myHandler

【讨论】：

感谢您的回复。第一种方法对我来说更相关，因为我们在 Ext Js 框架上有一个自定义层。虽然它回答了我最初的问题，但我想问的一件事是，当我使用“on”方法时，我指定了每个事件处理程序的范围。在这种情况下，多个侦听器的范围是否通用，或者我可以分别为每个侦听器定义范围。对不起，我对 extjs 的了解有限。

作用域对所有监听器都是通用的，因为它只是闭包，并且您在代码中的相同位置定义它。如果您在处理函数中询问this 引用（默认为触发事件的对象），您可以使用侦听器配置的scope 属性更改范围。检查addListener 描述 - docs.sencha.com/extjs/4.2.1/#!/api/…

再次感谢。但我想我们可以选择文档中指定的这种机制，并为每个侦听器指定不同的范围 fn: func, scope: this

是的，我的意思是-“您可以使用侦听器配置的范围属性更改范围”。但是，如果在“范围”下您的意思是处理函数 this 引用，则它是正确的。如果在“范围”下，您的意思是变量的可见性 - 它对所有处理函数都是通用的，除非您在代码中的不同位置定义它并在 fn 属性中作为引用传递。