You found a bug! We've classified it as TOUCH-2622 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    May 2011
    Location
    Mumbai, India
    Posts
    5
    Vote Rating
    0
    harishsave is on a distinguished road

      0  

    Default beforesubmit confirm message box

    beforesubmit confirm message box


    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:

    Code:
    ....
    ......
    xtype: 'formpanel',
       title: 'Contact',
       iconCls: 'user',
       url: 'sendmail.php',
       listeners: {
           beforesubmit: confirmSend
       },
       layout: 'vbox',
       cls: 'forms',
    ........
    .....
    ...
    and here is confirmSend function code:

    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:

    Code:
    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.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


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

    Code:
        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:

    Code:
    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;
            }
        }
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    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.

    Code:
    listeners: {
        order: 'before',
        beforesubmit: function() {
            // ...
        }
    }
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  4. #4
    Sencha User
    Join Date
    May 2011
    Location
    Mumbai, India
    Posts
    5
    Vote Rating
    0
    harishsave is on a distinguished road

      0  

    Default


    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:

    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;
    }

  5. #5
    Sencha User
    Join Date
    May 2011
    Location
    Mumbai, India
    Posts
    5
    Vote Rating
    0
    harishsave is on a distinguished road

      0  

    Default Bug Fixed?

    Bug Fixed?


    Is this bug fixed? or any work around available?

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by harishsave View Post
    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  7. #7
    Sencha User benwhite's Avatar
    Join Date
    Oct 2010
    Location
    Columbus, OH
    Posts
    49
    Vote Rating
    0
    benwhite is on a distinguished road

      0  

    Default


    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"?
    Code:
    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);
    }

  8. #8
    Sencha - Dev Team
    Join Date
    Aug 2012
    Location
    France
    Posts
    23
    Vote Rating
    0
    NiNiX is on a distinguished road

      0  

    Default Same issue, different scenario

    Same issue, different scenario


    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
    PHP Code:
    [...]
        
    _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
    PHP Code:
    [...]
        
    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
    Code:
    _fireAction (before)
    _doClick
    _onClick (return false)
    _fireAction (after)
    Attached Files