ExtJS 4 - ¿Cómo editar condicionalmente una celda en una cuadrícula?

Question

Tengo un panel de cuadrícula que usa el complemento de edición de celda.

En este panel de cuadrícula, quiero edición condicional en una celda en la forma siguiente:

Cuando un usuario hace clic en la celda para editar, no debe ser confirma diálogo que se muestra - "¿Quieres editar la celda? " - Si elige 'Sí', la celda se enfoca y la edición comienza, de lo contrario, la celda permanece desactivada.

He intentado usar el evento 'beforeedit', pero el usuario puede modificar los valores usando las teclas de flecha (ya que el editor es un campo numérico) incluso cuando se muestra el cuadro de confirmación, es decir, aunque el mouse el clic está deshabilitado, pero las teclas de flecha aún pueden cambiar el valor del campo.

Además, cuando el usuario elige 'Sí', la celda pierde el foco y no puedo hacer que comience a editar inmediatamente después de hacer clic en 'Sí'. Intenté usar el método de "enfoque" pero no tuve suerte.

¿Alguna guía en esto?

Gracias de antemano.

Más información:

He intentado utilizar - startEditByPosition() - función de plug-in edición de la celda cuando el usuario elige 'Sí'. Pero luego, debido a esto, el cuadro de confirmación sigue apareciendo, al seleccionar el inicio de edición 'Sí' que llama al evento beforeedit nuevamente. ¿Alguna ayuda?

Answer 1

Puede crear una variable de indicador como isEditAllowed. Verifíquelo en beforeedit. Si es falso, muestre confirm de lo contrario, no haga nada. Si el usuario confirma el conjunto isEditAllowed a true y startEditByPosition. En caso edit establece 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; 
       } 
      } 
      }) 
     ], 

Here is demo.