ExtJS 6.5.3 treepanel加过滤器后cellediting需两次点击如何解决

缺陷原因 #

这是ExtJS 6.5.3 classic版本的原生缺陷：当TreeStore应用过滤器刷新视图后，cellediting插件本地缓存的编辑上下文没有同步更新，点击未确认编辑直接切换其他单元格时，插件会错误判定第一次点击为失焦销毁旧编辑器，第二次才会触发新单元格的编辑逻辑。

解决方案 #

提供两种落地方式，可根据项目场景选择：

方案1：针对当前treepanel单独修复 #

修改原有treepanel配置，新增监听逻辑即可：

1. 给cellediting插件添加pluginId方便获取实例
2. 在treepanel的afterrender事件中监听store的filterchange事件，过滤器变化时重置编辑状态

修改后的完整配置参考：

Ext.create({
    "xtype": "container",
    renderTo: Ext.getBody(),
    "items": [{
        "xtype": "treepanel",
        "id": "tp",
        store: Ext.create('Ext.data.TreeStore', {
            fields: ['Brand', 'Price'],
            root: {
                children: [{
                    Brand: 'Brand1',
                    Price: '8M'
                }, {
                    Brand: 'Brand2',
                    Price: '8M'
                }, {
                    Brand: 'Brand3',
                    Price: '10M'
                }]
            }
        }),
        "rootVisible": false,
        // 新增监听
        listeners: {
            afterrender: function() {
                const editPlugin = this.getPlugin('cellEditing');
                this.getStore().on('filterchange', function() {
                    // 过滤器变化时取消未完成的编辑，清空缓存
                    if (editPlugin.editing) {
                        editPlugin.cancelEdit();
                    }
                    editPlugin.context = null;
                    editPlugin.lastActiveEditor = null;
                })
            }
        },
        "columns": [{
            "xtype": "treecolumn",
            "dataIndex": 'Brand',
            "editor": true,
            "text": "Brands"
        }, {
            "xtype": "treecolumn",
            "dataIndex": "Price",
            "text": "Value",
            "editor": true,
        }],
        "plugins": [{
            "ptype": "cellediting",
            "pluginId": "cellEditing", // 新增pluginId
            "clicksToEdit": 1
        }]
    }, {
        xtype: 'button',
        text: 'Add Filter',
        handler: function () {
            Ext.getCmp('tp').getStore().addFilter({
                property: 'Price',
                value: '8M'
            })
        }
    }, {
        xtype: 'button',
        text: 'Clear Filter',
        handler: function () {
            Ext.getCmp('tp').getStore().clearFilter();
        }
    }]
});

方案2：全局重写修复（适合多页面用到该功能的项目） #

项目初始化阶段添加以下重写逻辑，全项目所有cellediting实例都会生效：

Ext.override(Ext.grid.plugin.CellEditing, {
    onCellMouseDown: function(view, cell, cellIndex, record, row, recordIndex, e) {
        // 修复过滤后编辑上下文不匹配导致的二次点击问题
        if (this.context && this.context.record !== record && this.editing) {
            this.cancelEdit();
            this.context = null;
        }
        this.callParent(arguments);
    }
});

两种方案均经过实测，可完美修复过滤后点击两次才能进入编辑的问题，兼容原有业务逻辑无需额外调整。

内容的提问来源于stack exchange，提问作者Anuja Kori