I have a bo in my extjs application and I want to show 'Are you sure?' confirm window to the user and prevent changing if user said no.

Since JavaScript's confirm box is synchronous, it works properly. But using Ext JS, the confirmation message is shown, and the rest of my code would be executed before user responds. Here is my code:

// JavaScript confirm box
{
    xtype: 'bo',
    ...
    ...
    ...
    listeners: {
        beforeselect: function(bo, record, index ) {
            if(confirm('Are you sure ?') == false)
            {
                 return false; // prevent bo from changing
            }
            // else continue
        }
    }
}
// Ext JS message box (to confirm)
{
    xtype: 'bo',
    ...
    ...
    ...
    listeners: {
        beforeselect: function(bo, 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 bo
                    }
                    else if (btn == 'no') {
                        // prevent bo from changing
                    }
                }
            });
        }
    }
}

The problem is the Ext.Msg.show gets a callback function and is not waiting for user answer and we're not able to prevent bobox changing.

What should I do?

I have a bo in my extjs application and I want to show 'Are you sure?' confirm window to the user and prevent changing if user said no.

Since JavaScript's confirm box is synchronous, it works properly. But using Ext JS, the confirmation message is shown, and the rest of my code would be executed before user responds. Here is my code:

// JavaScript confirm box
{
    xtype: 'bo',
    ...
    ...
    ...
    listeners: {
        beforeselect: function(bo, record, index ) {
            if(confirm('Are you sure ?') == false)
            {
                 return false; // prevent bo from changing
            }
            // else continue
        }
    }
}
// Ext JS message box (to confirm)
{
    xtype: 'bo',
    ...
    ...
    ...
    listeners: {
        beforeselect: function(bo, 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 bo
                    }
                    else if (btn == 'no') {
                        // prevent bo from changing
                    }
                }
            });
        }
    }
}

The problem is the Ext.Msg.show gets a callback function and is not waiting for user answer and we're not able to prevent bobox changing.

What should I do?

• javascript
• extjs
• bobox
• callback
• client-side

1 Answer 1

In order to cancel the bobox change, the beforeSelect listener needs to return false. My suggestion is:

beforeselect: function(bo, 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 bo value
        // since the original select event was cancelled
        bo.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;
}

The ExtJS Modal does not halt execution of the script like the native dialog, which means that the beforeSelect listener was returning prior to the user action. The way this code works is that the select event is immediately stopped, and the dialog shown. When the user selects "yes", then the value on the bo is programmatically set in the callback function.