如何才能讓用戶確認ExtJs中的組合框更改事件？

Question

我在我的extjs應用程序中有一個組合，我想顯示'您是否 當然？'向用戶確認窗口，並在用戶拒絕的情況下防止改變。

由於JavaScript的確認框是同步的，所以它可以正常工作。但是使用Ext JS，會顯示確認消息，而我的代碼的其餘部分將在用戶響應之前執行。這裏是我的代碼：

// 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 
        } 
       } 
      }); 
     } 
    } 
} 

問題是Ext.Msg.show得到一個回調函數，而不是等待用戶的答案，我們無法阻止組合框變化。

我該怎麼辦？

Answer 1

爲了取消組合框更改，beforeSelect偵聽器需要返回false。我的建議是：

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; 
} 

ExtJS的模態不暫停像本地對話框，這意味着beforeSelect偵聽器之前的用戶動作返回腳本的執行。此代碼的工作方式是立即停止選擇事件，並顯示對話框。當用戶選擇「是」時，則組合中的值以編程方式在回調函數中設置。