如何避免在使用单元格编辑的ExtJS网格上按两次保存按钮

How to avoid pressing save button twice on an ExtJS grid that uses cell editing

本文关键字：网格 ExtJS 按两次 按钮 保存 编辑 何避免 单元格      更新时间：2023-09-26

当使用ExtJS网格进行单元格编辑时，可能存在必须单击按钮两次的问题，因为编辑器(文本字段)的模糊事件首先被调用，然后第一个按钮单击事件出于某种原因不再可访问。在这种情况下，如何避免按下(保存)按钮两次?

为了避免使用其他答案时出现的一些错误，我将需要的内容提取到它自己的xtype中，如下所示:

Ext.define('Predictive.view.ParamGridSaveButton', {
    extend: 'Ext.button.Button',
    alias: 'widget.paramGridSaveButton',
    onMouseDown: function() {
        Predictive.eventBus.fireEvent('dropdownSaveClicked', this);
        this.callParent(arguments);
    }
});

我们利用了mousedown应该在模糊之前触发的事实;看:应该先模糊还是先滑鼠?(尽管使用了jQuery，但还有不止一篇文章)。ExtJS没有直接在它的按钮组件上暴露mousedown，也许考虑到click足够，但它确实实现了一个onMouseDown方法，这是一个足够的入口点。

请参阅下面的工具栏定义，特别是IIFE中最后一个"保存"按钮(立即调用的函数表达式)。我正在做的是用Ext.function.createInterceptor增强的版本替换按钮实例的onMouseDown实现。

为了保持MVC友好，我可以(并且将)用单个事件的触发来代替整个函数体，控制器将侦听该事件。希望这对某些人有所帮助，并有兴趣看到其他建议的解决方案，无论是在这里还是在Sencha论坛

dockedItems: [{
    xtype: 'toolbar',
    dock: 'top',
    items: [{
        xtype: 'button',
        text: 'Add Another'
    }]
},{
    xtype: 'toolbar',
    dock: 'bottom',
    items: [{
        xtype: 'tbfill'
    }, {
        xtype: 'button',
        text: 'Cancel'
    }, (function() {
        var saveButton = Ext.create('Ext.button.Button', {
            text: 'Save'
        });
        saveButton.onMouseDown = Ext.Function.createInterceptor(saveButton.onMouseDown, function () {
            var gridValues = Ext.pluck(saveButton.up('grid').store.data.items, 'data');
            var paramTypeWindow = saveButton.up('window');
            var typeDetailCell = paramTypeWindow.typeDetailCell;
            paramTypeWindow.close();
            if (typeDetailCell.items.length === 0) {
                typeDetailCell.add({
                    xtype: 'textarea',
                    width: 375
                });
            }
            typeDetailCell.items.getAt(0).setValue(Ext.encode(gridValues));
        }, saveButton)
        return saveButton;
    })()]
}]
相关文章：