beforesubmit confirm message box

[harishsave]

Hi,

I'm making a contact form in sencha and before sending the form I want it to ask user confirmation to send it or no. For this I tap 'beforesubmit' event like this:

....
......
xtype: 'formpanel',
   title: 'Contact',
   iconCls: 'user',
   url: 'sendmail.php',
   listeners: {
       beforesubmit: confirmSend
   },
   layout: 'vbox',
   cls: 'forms',
........
.....
...

and here is confirmSend function code:

function confirmSend(panel, vals, opts) {
    Ext.Msg.confirm("Confirmation", "Are you sure you want to send this info?", function(btn){
      if (btn == 'Yes'){
        alert('go ahead');
      } else {
        alert('abort');
      }
    });
}

Now I don't see this confirm message when I click on Submit. But I know that the form listeners is working and it does call the confirmSend function. When I just put a Alert() in confirmSend, it shows that message. Like this:

function confirmSend(panel, vals, opts) {
    alert('hello');
    
    /*Ext.Msg.confirm("Confirmation", "Are you sure you want to send this info?", function(btn){
      if (btn == 'Yes'){
        alert('go ahead');
      } else {
        alert('abort');
      }
    });*/
}

Can anybody tell me what I'm doing wrong.

[mitchellsimoens]

beforesubmit should be preventable so you should return false like so:

    listeners : {
        beforesubmit : function() {
            console.log('fired');

            Ext.Msg.confirm("Confirmation", "Are you sure you want to send this info?", function(btn){
                if (btn === 'yes'){
                    console.log('go ahead');
                } else {
                    console.log('abort');
                }
            });

            return false;
        }
    }

However, trying this and it does not prevent the submitting so I am going to report as a bug.

Full testcase:

new Ext.form.Panel({
    fullscreen : true,
    url        : 'data/json.json',
    items      : [
        {
            xtype : 'textfield',
            label : 'Test',
            name  : 'test'
        },
        {
            xtype   : 'button',
            text    : 'Submit',
            handler : function(button) {
                var form = button.up('formpanel');

                form.submit({
                    success : function() {
                        console.log('submit handled!');
                    }
                });
            }
        }
    ],
    listeners : {
        beforesubmit : function() {
            console.log('fired');

            Ext.Msg.confirm("Confirmation", "Are you sure you want to send this info?", function(btn){
                if (btn === 'yes'){
                    console.log('go ahead');
                } else {
                    console.log('abort');
                }
            });

            return false;
        }
    }
});

[rdougan]

All events are fired *after* the event, just like 1.x. It just so happens that this event doesn't really make sense to be fired *after*.

We will fix this hopefully before the next release, but until then, you can change the 'order' to be before.

listeners: {
    order: 'before',
    beforesubmit: function() {
        // ...
    }
}

[harishsave]

Thanks mitchellsimoens and rdougan

The confirmation message is now showing up when I put order: 'before' but now when I return true when user taps on Yes, the form is not getting submitted. What is wrong?

Here is the code:

function confirmSend(panel, vals, opts) {
    Ext.Msg.confirm("Confirmation", "Are you sure you want to send this info?", function(btn){
        if (btn == 'yes') {
            return true;
        } else {
            return false;
        }
    });
    
    return false;
}

[harishsave]

Is this bug fixed? or any work around available?

[mitchellsimoens]

Is this bug fixed? or any work around available?

At the top of the thread you should be able to track if a bug is open or fixes or closed. For instance, this one still states that this is open.

[benwhite]

Isn't this really a bug with the Ext.mixin.Observable#fireAction method?
The documentation says...
"Fires the specified event with the passed parameters and execute a function (action) at the end if there are no listeners that return false."

Shouldn't you just make the default order for functions passed into the fireAction method be "after"?

fireAction: function(eventName, args, fn, scope, options, order) {
       var fnType = typeof fn,
           action;
       if (args === undefined) {
           args = [];
       }
       if (fnType != 'undefined') {
           action = {
               fn: fn,
               isLateBinding: fnType == 'string',
               scope: scope || this,
               options: options || {},
               order: order || 'after'
            };
       }
       return this.doFireEvent(eventName, args, action);
}

[NiNiX]

Versions: 2.2.0-alpha (and 2.1.1)
Browser: Chrome 24 (Win8 / Desktop)
Attachment: Full test case

The fireAction function (3rd parameter 'fn') is called BEFORE controller's bound slots if identifier selectors are used in the 'control' config. If xtype selectors are used, fireAction() works as expected (and the action function is called AFTER). Same workaround, explicitly use this.fireAction('click', [ this ], '_doClick', this, {}, 'after').

Test case (code extracted from the full test case in attachment):

App.view.Main

​[...]
    _fireAction: function() {
        console.log('----\n_fireAction (before)');
        this.fireAction('click', [ this ], '_doClick');
        console.log('_fireAction (after)\n----');
    },

    _doClick: function() {
        console.log('_doClick');
    }
[...] 

App.controller.Main

[...]
    config: {
        control: {

            // [OK] _onClick is called BEFORE action function
            //'main': { click: '_onClick' },

            // [FAILED] _onClick is called AFTER action function,
            // so we can't prevent action execution.
            '#app-main': { click: '_onClick' }
        }
    },

    _onClick: function() {
        console.log('_onClick (return false)');
        return false;
    }
[...] 

Console output

_fireAction (before)
_doClick
_onClick (return false)
_fireAction (after)