How to automate 'yes' click for Ext.MessageBox.confirm button ( Ext JS version 6.0)?

Question

Ext.MessageBox.confirm('Confirm', 'Do you like Ext JS?', function (button) {

            if (myCounter !== 0) {

                // auto click 'Yes' button

            } else if (button === 'yes') {

                    //do somethhing

                }
            })

I cannot change/add the function to code block, this is current code block.

Please let me know how to auto click 'yes' when the pop-up shows on UI, when myCounter!==0.

The else if block is for manual button click.

Answer 1

Not sure what your goal is with wanting to auto-click "Yes" but here is code that modifies it so you have more options on displaying or not displaying the confirm dialog.

let myCounter = 0;

    let showDialog = function () {
        console.log('showDialog:' + myCounter);
        if (myCounter > 0) {
            myCounter++; // Counter incremented due to defaulting to yes click
            console.log('myCounter != 0: ' + myCounter);
            return false;
        } else {
            displayDialog();
        }
    }

    function displayDialog () {
        console.log('displayDialog: ' + myCounter);
        Ext.Msg.confirm('Confirm', 'Do you like Ext JS?', function (button) {
            if (button === 'yes') {
                myCounter++; // If yes, increment counter
            } else {
                myCounter--; // Decrement counter if answer no
                console.log('no answer: ' + myCounter);
            }
        });
    }

    let btn = Ext.create({
        xtype: 'button',
        text: 'Show Dialog',
        renderTo: Ext.getBody(),
        width: 200,
        height: 50,
        handler: showDialog
    });

    // Ext.Viewport.add(btn);
    btn.show();

Having the confirmation just show, then trying to hide it from there has no means to validate your code is working. This is why in the fiddle I have a button added to the view to demonstrate how the code is working to show the dialog and prevent it from displaying.

With the code as you show it, the function is a handler to the button click on the dialog and it would never prevent it from displaying. The dialog is shown, code waits for the user click and then runs the code inside the handler function you have defined.

Here is another fiddleto better demonstrate another way to achieve what you are asking.

myCounter = 0;

    function showDialog () {
        if (myCounter != 0) {
            console.log('Do NOT show the dialog');
        } else {
            Ext.Msg.show({
                title: 'Confirm',
                msg: '<p>Do you like Ext JS?',
                icon: Ext.Msg.QUESTION,
                buttons: Ext.Msg.YESNO,
                fn: function (ans) {
                    if (ans === 'yes') {
                        myCounter++;
                    }
                }
            })
        }
    }

    let btn = Ext.create({
        xtype: 'button',
        text: 'Show Dialog',
        renderTo: Ext.getBody(),
        width: 200,
        height: 50,
        handler: showDialog
    });

    // Ext.Viewport.add(btn);
    btn.show();
    showDialog();

The above uses a custom message box, styling it as a default confirm. The confirmation is displayed, user answers either yes or no. A button was added so you can reopen the confirmation dialog should a "No" be selected. Once user answers "Yes" the dialog is no longer displayed.

There is no straight means I am aware of to "auto-click" the Yes button as the handler function on any button won't trigger until a button is clicked. These two are how I would recommend handling it so it works like you expect.