javascript - 如何让用户确认 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 不会像 native 对话框那样停止脚本的执行，这意味着 beforeSelect 监听器在用户操作之前返回。此代码的工作方式是立即停止选择事件，并显示对话框。当用户选择"is"时，组合上的值将在回调函数中以编程方式设置。