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

Question

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

在此网格面板中,我希望以下列方式对单元格进行条件编辑:

当用户单击要编辑的单元格时,应该显示确认对话框 - "您要编辑单元格吗？" - 如果他选择"是",则关注单元格并开始编辑,否则单元格将保持禁用状态.

我尝试使用'beforeedit'事件,但是即使显示确认框,用户也可以使用箭头键修改值(因为编辑器是数字字段),也就是说,尽管鼠标单击被禁用但是箭头键仍然可以更改字段的值.

此外,当用户选择"是"时,单元格失去焦点,我无法在"是"点击后立即开始编辑.我尝试过使用'焦点'方法,但没有运气.

有人可以指导一下吗？

提前致谢.

更多信息:

当用户选择"是"时,我尝试使用 - startEditByPosition() - 单元格编辑插件的功能.但是,由于这个原因,确认框会一直显示,就像选择"是"编辑开始一样,再次调用beforeedit事件.有帮助吗？

Answer 1

你可以创建一些标志变量isEditAllowed.检查一下beforeedit.如果是假显示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;
              }
            }
          })
      ],

这是演示.