ExtJS 4 - Come modificare condizionatamente una cella in una griglia?

Question

Ho un pannello della griglia che utilizza il plugin di modifica delle celle.

In questo pannello grigliato, voglio editing condizionale su una cella in modo seguente:

Quando un utente fa clic sulla cella per modificare, ci dovrebbe essere confermare finestra di dialogo mostrata - "Vuoi modificare la cella? " - se sceglie "Sì", la cella viene focalizzata e la modifica inizia altrimenti la cella rimane disabilitata.

Ho provato a utilizzare l'evento 'beforeedit', ma l'utente è in grado di modificare i valori utilizzando i tasti freccia (poiché l'editor è un campo numerico) anche quando viene visualizzata la casella di conferma, cioè, sebbene il mouse- il clic è disabilitato ma i tasti freccia possono ancora modificare il valore del campo.

Inoltre, quando l'utente sceglie "Sì", la cella perde lo stato attivo e io non sono in grado di farlo iniziare subito dopo "Sì". Ho provato a utilizzare il metodo 'focus' ma senza fortuna.

Qualche guida in questo?

Grazie in anticipo.

Ulteriori informazioni:

Ho provato ad utilizzare - startEditByPosition() - la funzione di modifica delle celle plug-in quando l'utente sceglie 'Sì'. Ma poi, a causa di ciò, la finestra di conferma continua a comparire, come quando si sceglie la modifica "Sì" che richiama di nuovo l'evento precedente. Qualsiasi aiuto?

Answer 1

È possibile creare alcune variabili di flag come isEditAllowed. Controllalo in beforeedit. Se è falso, mostra confirm altrimenti non fare nulla. Se l'utente conferma imposta isEditAllowed a true e startEditByPosition. In edit evento impostato 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.