ExtJS 4 - Jak warunkowo edytować komórkę w siatce?

Question

Mam panel siatki za pomocą wtyczki edycji komórki.

W tym panelu siatki, chcę edycji warunkową na komórkę w następujący sposób:

Kiedy użytkownik kliknie w komórce do edycji, nie należy potwierdzić okno pokazane - „Czy chcesz edytować komórkę? " - jeśli wybierze opcję "Tak", wówczas komórka jest skupiona i rozpoczyna się edycja, w przeciwnym razie komórka pozostaje wyłączona.

Próbowałem użyć zdarzenia 'beforeedit', ale użytkownik może modyfikować wartości za pomocą klawiszy strzałek (ponieważ edytor jest polem numerycznym), nawet gdy wyświetlane jest okno potwierdzenia, to znaczy, że mysz kliknięcie jest wyłączone, ale klawisze strzałek nadal mogą zmieniać wartość pola.

Ponadto, gdy użytkownik wybierze opcję "Tak", komórka utraci ostrość i nie będę w stanie rozpocząć edycji zaraz po kliknięciu przycisku "Tak". Próbowałem użyć metody "skupienia", ale bez powodzenia.

Czy można w tym pomóc?

Z góry dziękuję.

Więcej informacji:

Próbowałem za pomocą - startEditByPosition() - funkcja wtyczki edycji komórek, gdy użytkownik wybierze 'Tak'. Ale z tego powodu pole potwierdzenia nadal pojawia się, ponieważ po wybraniu "Tak" rozpoczyna się edycja, która ponownie wywołuje zdarzenie beforeedit. Jakaś pomoc?

Answer 1

Można utworzyć zmienną flagową, taką jak isEditAllowed. Sprawdź to w beforeedit. Jeśli jest fałszywy, pokaż, że nie robisz nic. Jeśli użytkownik potwierdzi, ustaw isEditAllowed na true i startEditByPosition. W edit wydarzenie ustawić isEditAllowed do 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.