ExtJS 4 - 如何有条件地编辑网格中的单元格？

Question

我有一个使用单元格编辑插件的网格面板。

在此网格面板中，我希望通过以下方式对单元格进行条件编辑：

当用户单击单元格进行编辑时，应该显示确认对话框 - “您想编辑单元格吗？” - 如果他选择“是”，则单元格将获得焦点并开始编辑，否则单元格将保持禁用状态。

我尝试过使用“beforeedit”事件，但即使显示确认框，用户也可以使用箭头键修改值（因为编辑器是数字字段），也就是说，尽管禁用了鼠标单击，但是箭头键仍然可以更改字段的值。

另外，当用户选择“是”时，单元格会失去焦点，并且我无法使其在单击“是”后立即​​开始编辑。我尝试过使用“焦点”方法，但没有成功。

有人可以指导一下吗？

提前致谢。

更多信息：

当用户选择“是”时，我尝试使用 - startEditByPosition() - 单元格编辑插件的功能。但是，由于这个原因，确认框不断出现，因为选择“是”时编辑开始，再次调用 beforeedit 事件。有什么帮助吗？

Answer 1

您可以创建一些标志变量，例如 isEditAllowed。在 beforeedit 中检查它。如果为 false，则显示confirm，否则不执行任何操作。如果用户确认将 isEditAllowed 设置为 true 和 startEditByPosition。在 edit 事件中将 isEditAllowed 设置为 false：

        plugins: [
          Ext.create('Ext.grid.plugin.CellEditing', {
              clicksToEdit: 1,
            listeners: {
              'beforeedit': function(e) {
                var me = this;
                var allowed = !!me.isEditAllowed;
                if (!me.isEditAllowed)
                  Ext.Msg.confirm('confirm', 'Are you sure you want edit?', function(btn){
                    if (btn !== 'yes')
                      return;
                    me.isEditAllowed = true;
                    me.startEditByPosition({row: e.rowIdx, column: e.colIdx});
                  });
                return allowed;
              },
              'edit': function(e) {
                this.isEditAllowed = false;
              }
            }
          })
      ],

这是演示。