Ext JS 4 - 仅在具有多个选定行的网格中编辑一行

Question

这是我正在努力的要求之一.

我有一个网格,selmodel为'Ext.selection.CheckboxModel'.要编辑网格行,我可以使用RowEditing或CellEditing插件.所以,在这里我会发生什么:

1. 我选择了多个复选框/行.
2. 然后我单击/点击其中一个选定的行来编辑其中的数据.
3. 除了双击要编辑的行之外,这将取消选择所有其他行.

我不希望取消选择其他行.我应该能够单击/点击其中一个选定的行并仍然选择其余行.

当所有行都被选中时.

双击一行后,您可以看到其他行被取消选中.

Answer 1

从beforedeselect事件中返回false 将阻止取消选择.因此,对于单击情况,编辑时应该很容易防止取消选择.幸运的是,它似乎beforedeselectevent在beforeedit事件发生之后被触发(至少在4.2.0中,在版本之间可能不稳定).

使用行编辑:

plugins: [
    Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToEdit: 1
        ,pluginId: 'editing'
    })
]
,listeners: {
    beforedeselect: function(sm, record) {
        var plugin = this.getPlugin('editing');
        return !plugin.editing;
    }
    // The checkbox selection column should probably not be editable, but 
    // apparently it is not accounted for... So we must prevent edition on
    // this column, or you won't be able to deselect using the checkbox.
    ,beforeedit: function(editor, context) {
        return context.colIdx !== 0;
    }
}

使用单元格编辑:

plugins: [
    Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
        ,pluginId: 'editing'
    })
]
,listeners: {
    beforedeselect: function(sm, record) {
        var plugin = this.getPlugin('editing');
        // In 4.2.0 there is apparently a bug that makes
        // plugin.editing always true
        return !plugin.getActiveEditor();
    }
    ,beforeedit: function(editor, context) {
       return context.colIdx !== 0;
    }
}

对于双击,您可以通过捕获取消选择事件并仅在编辑尚未开始时释放它来详细说明此策略.

plugins: [
    Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToEdit: 2
        ,pluginId: 'editing'
    })
]
,listeners: {
    beforeedit: function(editor, context) {
        return context.colIdx !== 0;
    }
    ,beforedeselect: function(sm, record) {
        var plugin = this.getPlugin('editing');
        setTimeout(function() {
            if (!plugin.editing) {
                // The true prevents the event from firing again,
                // and an infinite loop.
                sm.deselect(record, true);
            }
        }, 200);
        return false;
    }
}

但是,您必须猜测用户的双击延迟.太短,你可能会错过一些双击,而太长会导致取消选择令人不快的延迟.