重新定义 ExtJS 事件并委托给以前的实现

Question

我继承了一个大型 ExtJS3 代码库，并且有一个 Ext.grid.CellSelectionModel 的 beforecellselect 的“基础”覆盖。我正在截断大量代码，但这应该提供一个总体思路：

Ext.override(Ext.grid.CellSelectionModel, {
    init:function() {
        Ext.grid.CellSelectionModel.superclass.init.apply(this, arguments);

        if (this.unselectableColumns || this.visuallyMimicRowSelection || this.colSpecificHandlers){
        this.on('beforecellselect', function(selModel, rowIndex, columnIndex){
            //etcetera

然而，随后我们将实例化一个 CellSelectionModel，并在其上指定一个 beforecellselect 侦听器，如下所示：

var sm = new Ext.grid.CellSelectionModel({
listeners: {
    beforecellselect : {
    fn: function(selModel, rowIndex, colIndex) {
            //etcetera

问题是，在新 CellSelectionModel 实例的侦听器中，我还需要调用覆盖中定义的侦听器。因为 ExtJS 似乎保留了一组同名事件侦听器，所以我可以按如下方式进行委托：

selModel.events.beforecellselect.listeners[1].fn.apply(selModel, arguments);

好的，我知道我不应该对索引进行硬编码。但除此之外，还有更好、更 ExtJS-y 的方法吗？

Answer 1

在您的情况下，如果您知道它将是一个将在构造函数之外使用的函数， 我建议将事件处理函数添加为 CellSelectionModel 的方法 实例，如下图：

    Ext.override(Ext.grid.CellSelectionModel, {
        init:function() {
            Ext.grid.CellSelectionModel.superclass.init.apply(this, arguments);
            this.customBeforeCellSelect = function(selModel, rowIndex, colIndex) {
                // etcetera
            };
            if (this.unselectableColumns
                || this.visuallyMimicRowSelection
                || this.colSpecificHandlers) {
                this.on('beforecellselect', this.customBeforeCellSelect, this);
            }
    });

    var sm = new Ext.grid.CellSelectionModel({
        listeners: {
            beforecellselect : {
                fn: function(selModel, rowIndex, colIndex) {
                    selModel.customBeforeCellSelect.apply(selModel, arguments);
                },
                scope: sm
            }
        }
    });

但是，请记住，您将事件处理程序附加到覆盖构造函数中的 beforecellselect 事件，因此如果您在特定实例 listeners 中的 beforecellselect 期间再次调用此事件处理程序函数，那么您最终将执行连续两次相同的功能。

出于效率考虑，您可以将自定义处理程序移至Ext.grid.CellSelectionModel 的原型，即，而不是将customBeforeCellSelect 放在init 内的单个实例上。请执行以下操作以实现此目的：

    Ext.grid.CellSelectionModel.prototype.customerBeforeCellSelect =
        function(selModel, rowIndex, colIndex) {
            // etcetera
    };

您可以在override 语句之后添加上述行。