Question

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

Answer 1

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

Ext.define('Predictive.view.ParamGridSaveButton', {
    extend: 'Ext.button.Button',
    alias: 'widget.paramGridSaveButton',

    onMouseDown: function() {
        Predictive.eventBus.fireEvent('dropdownSaveClicked', this);
        this.callParent(arguments);
    }
});

Answer 2

我们利用了mousedown在模糊之前应该开火的事实;请参阅：Should blur or mousedown fire first?（以及多个其他帖子，尽管使用jQuery）。 ExtJS没有直接在它的按钮组件上公开mousedown，也许考虑点击足够，但它确实实现了一个onMouseDown方法，这就足够了一个入口点。

请参阅下面的工具栏定义，特别是IIFE中的最后一个“保存”按钮（立即调用的函数表达式）。我正在做的是将按钮实例的onMouseDown实现替换为使用Ext.function.createInterceptor扩充的版本。

为了保持MVC友好性，我可以（而且会）用控制器将要监听的单个事件的触发来替换整个函数体。希望这有助于某人，并有兴趣在此处或the Sencha forums

上查看其他建议的解决方案

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;
    })()]
}]

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

2 个答案: