如何讓用戶確認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 Modal不像本機對話框那樣暫停腳本的執行，這意味着beforeSelect偵聽器在用戶操作之前返回。 此代碼的工作方式是立即停止select事件，並顯示對話框。 當用戶選擇“是”時，則在回調函數中以編程方式設置組合上的值。