ExtJS Ex.Msg adding additional listener

Question

I have an external javascript library, which I have to use. The library is using ExtJS 6.6. This library has this code

var confirmationCallback = function(btn) {
  if (btn == "yes") {
    //do something
  }
};

Ext.Msg.show({
  title:  'Confirm Operation',
  buttons: Ext.MessageBox.YESNO,
  fn: confirmationCallback,
  icon: Ext.MessageBox.WARNING,
  msg: 'Are you sure?',
  scope: this
});

My problem is that I need to do something when the user clicks No button and there is no handler for this in the library. They only handle Yes button. Also, I cannot modify this library because of license and many other reasons.

My question: Can I add No button handle somehow? I can only put my javascript code just before Ext.Msg.show call (there is a customisation point in the library at this place). I tried something like Ext.Msg.on("hide", console.log("hide listener")); and some other ways and it does not work. Ideally, it will be good to add my part at the end of their callback code. Or add my code to the hide/close event of the message box.

César Zea Gómez · Accepted Answer · 2021-03-17 12:16:23Z

1

If you execute:

Ext.Msg.show({
    title: 'Confirm Operation',
    buttons: Ext.MessageBox.YESNO,

    icon: Ext.MessageBox.WARNING,
    msg: 'Are you sure?',
    fn: function (buttonId) {
        alert('You pressed the "' + buttonId + '" button.');
    },
    scope: this
});

You can see that you received in buttonId 'yes', 'no' or 'cancel'.

Then, in your code:

var confirmationCallback = function(btn) {
  if (btn == "yes") {
    //do something
  } else if (btn == "no") {
    //do something
  } else if (btn == "cancel") {
    //The user has closed the dialog.
  }
};

Update

You can override Ext.window.MessageBox with the ExtJs Ext.override function. It's a valid option and you do not violate the terms of the license.

I have written that Sencha Fiddle showing the solution: https://fiddle.sencha.com/#view/editor&fiddle/3ch0

edited Mar 17, 2021 at 12:16

answered Mar 12, 2021 at 19:37

César Zea Gómez

1981 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Zlelik Over a year ago

This is clear. The problem is that confirmationCallback is in the external library, which I cannot change. I need to do the same, but without changing confirmationCallback. Inject my code somehow via event listener or Ext.apply or something else.

César Zea Gómez Over a year ago

If you check my answer you can see when the dialog is closed without push any button, the confirmation callback is called with 'cancel' as btn.

Zlelik Over a year ago

If you check my question, then you can see that callback looks like this and I cannot change it. var confirmationCallback = function(btn) { if (btn == "yes") {//do something}}; There is no "cancel" or "no" handler. The callback is designed in a way, that it does nothing when the user clicks no or close the window. You really did not read my question.

César Zea Gómez Over a year ago

I am updated the answer with the solution.

Collectives™ on Stack Overflow

ExtJS Ex.Msg adding additional listener

1 Answer 1

Update

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related