Come posso ottenere conferma utente su evento cambio combo in ExtJs?

Question

Ho una combinazione nella mia applicazione extjs e voglio mostrare 'Sei sicuro di ?' confermare la finestra all'utente e impedire la modifica se l'utente ha detto di no.

Poiché la casella di conferma di JavaScript è sincrona, funziona correttamente. Ma usando Ext JS, viene mostrato il messaggio di conferma, e il resto del mio codice verrebbe eseguito prima che l'utente risponda. Ecco il mio codice:

// JavaScript confirm box 
{ 
    xtype: 'combo', 
    ... 
    ... 
    ... 
    listeners: { 
     beforeselect: function(combo, record, index) { 
      if(confirm('Are you sure ?') == false) 
      { 
       return false; // prevent combo from changing 
      } 
      // else continue 
     } 
    } 
} 
// Ext JS message box (to confirm) 
{ 
    xtype: 'combo', 
    ... 
    ... 
    ... 
    listeners: { 
     beforeselect: function(combo, record, index) { 
      Ext.Msg.show({ 
       title: 'Warning', 
       msg: 'Are You Sure ?', 
       buttons: Ext.Msg.YESNO, 
       fn: function(btn) { 
        if (btn == 'yes') { 
         // continue and set new value on combo 
        } 
        else if (btn == 'no') { 
         // prevent combo from changing 
        } 
       } 
      }); 
     } 
    } 
} 

Il problema è la Ext.Msg.show ottiene una funzione di callback e non è in attesa di risposta degli utenti e non siamo in grado di prevenire combobox che cambia.

Cosa devo fare?

Answer 1

Per annullare la modifica della casella combinata, il listener beforeSelect deve restituire false. Il mio suggerimento è:

beforeselect: function(combo, record, index) { 
    Ext.Msg.show({ 
    title: 'Warning', 
    msg: 'Are You Sure ?', 
    buttons: Ext.Msg.YESNO, 
    fn: function(btn) { 
     if (btn == 'yes') { 

     // Here we have to manually set the combo value 
     // since the original select event was cancelled 
     combo.setValue(/* whatever value was selected */); 
     } 

     else if (btn == 'no') { 

     // Don't do anything because the select event was already cancelled 
     } 
    } 
    }); 

    // Cancel the default action 
    return false; 
} 

L'ExtJS modale non fermare l'esecuzione dello script come la finestra di dialogo nativa, il che significa che l'ascoltatore beforeSelect stava tornando prima azione dell'utente. Il modo in cui funziona questo codice è che l'evento selezionato viene immediatamente interrotto e viene visualizzata la finestra di dialogo. Quando l'utente seleziona "sì", il valore della combo viene impostato in modo programmatico nella funzione di callback.