Question

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

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

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

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

当所有行都被选中时。 enter image description here

双击一行后，您可以看到其他行被取消选中。 enter image description here

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;
    }
}

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

Answer 2

尝试将所选记录保留为变量，然后编辑该行。完成所有操作后，尝试重新选择所选行。

var selModel, selRows;
selModel = grid.getSelectionModel();
selRows = selModel.getSelection();

// after eediting, use the following
selModel.select(selRows);

Answer 3

您必须将第二个参数作为true传递给select方法，以保留以前的选择：

    selModel.select(rowsToSelect, true);

Sencha ExtJS文档供参考：

http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.selection.Model-method-select

希望它有所帮助!!

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

3 个答案: