6

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、コールバック関数を取得し、ユーザーの応答を待機せず、コンボボックスの変更を防ぐことができないことです。

私は何をすべきか？

4

1 に答える 1

10

コンボボックスの変更をキャンセルするには、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、ユーザー アクションの前にリスナーが返されたことを意味します。このコードが機能する方法は、選択イベントがすぐに停止され、ダイアログが表示されることです。ユーザーが「はい」を選択すると、コンボの値がプログラムによってコールバック関数に設定されます。

于 2013-03-02T21:28:35.473 に答える