ExtJS 4 - How to conditionally edit a cell in a grid?

Question

I have a grid panel using cell editing plugin.

In this grid panel, I want conditional editing on a cell in following manner:

When a user clicks on the cell to edit, there should be confirm dialog shown - "Do you want to edit the cell?" - if he chooses 'Yes' then the cell is focussed and editing begins otherwise the cell remains disabled.

I have tried using 'beforeedit' event, but the user is able to modify the values using the arrow keys (as the editor is a numberfield) even when the confirm box is being displayed, that is, though the mouse-click is disabled but arrow keys can still change the value of the field.

Also, when the user chooses 'Yes' then the cell looses focus and I am not being able to make it begin edit right after 'Yes' click. I have tried using 'focus' method but no luck.

Could some guide at this?

Thanks in advance.

More Information:

I tried using - startEditByPosition() - function of cell editing plugin when user chooses 'Yes'. But then, due to this, the confirm box keeps appearing back, as on choosing 'Yes' editing starts which call the beforeedit event again. Any help?

Solution

You can create some flag variable like isEditAllowed. Check it in beforeedit. If it is false show confirm else do nothing. If user confirms set isEditAllowed to true and startEditByPosition. In edit event set isEditAllowed to 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;
              }
            }
          })
      ],

Here is demo.

Comments

[netemp]

Excellent Solution Molecular Man. Thanks for sharing.

[Molecular Man]

@yurin, a lot of stuff has changed since 2011. Links to extjs resource files have changed as well :) Fixed the demo. Thanks