Question

I have a form and there is a button that submits it. I wish that submit would be executed only on tap on ‘Register’ button. But when user inputs some text in any textfield and presses “Go” (aka “Enter”) button. The form submits and I can do nothing about it.

This behavior is noticed on Samsung Galaxy S (GT i9000) on Android v2.3.6. But HTC with Android 4 behaves as I wish.

The submitOnAction:false doesn’t help.
beforesubmit too. Any of solutions in code listing don’t work.

I just don’t want the form to submit in any other way except pressing ‘Register’ button!

File /view/userRegistration/FormPanel.js

Ext.define('My.view.userRegistration.FormPanel', {
    extend: 'My.view.components.FormPanel',
    xtype : 'userRegistrationForm',

    config: {
        standardSubmit : false,
        submitOnAction : false,

        listeners: {
            beforesubmit: function(form, values, options, eOpts){
                console.log('before submit fired');
                return false; // returning false doesn't help
            },
            '> field': {
                keyup: function(fld, e){
                    //13 = user tapped 'return' button on keyboard
                    //10 = user tapped 'hide keyboard' on keyboard
                    if (e.browserEvent.keyCode == 13 || e.browserEvent.keyCode == 10) {
                        e.stopEvent();
                        fld.element.dom.blur();
                    }
                }
            }
        },

        items : [
            {
                xtype: 'textfield',
                name : 'firstName',
                required: true,
                listeners: {
                    action: function(field, e, eOpts) {
                    e.stopEvent();
                    return false;
                    },
                    keyup: function(field, e) {
                        if (e.browserEvent.keyCode == 13 || e.browserEvent.keyCode == 10) {
                            // GO pressed on "firstName"
                            e.stopEvent();
                            field.element.dom.blur();
                            return false;
                        }
                    }
                }
            },
            {
                xtype: 'button',
                text : 'Register',
                listeners: {
                    tap: function(button) {
                        var form = button.parent;
                        if (form.isValid()) {
                            form.onSubmit();
                        }
                    }
                }
            }
        ]
    }
});

File /view/components/FormPanel.js

Ext.define('My.view.components.FormPanel', {
    extend : 'Ext.form.Panel',

    onSubmit: function() {
        var fieldValues = this.getValues();
        // Sending fieldValues via AJAX
    },
    isValid: function(args) {
        // Validating values
    }
});

Answer 1

The problem was in the onSubmit() method. It is @private in sencha-touch-all-debug.js:

Ext.define('Ext.form.Panel', {

    // @private
    onSubmit: function(e) {
        var me = this;
        if (e && !me.getStandardSubmit()) {
            e.stopEvent();
        } else {
            this.submit();
        }
    }

}

So it is absolutely incorrect to override onSubmit() in child classes. More correct way.

File /view/components/FormPanel.js

Ext.define('My.view.components.FormPanel', {
    extend : 'Ext.form.Panel',

    config: {
        standardSubmit: false,

        listeners: {
            beforesubmit: function(form, values, options, eOpts) {
                // Do something with data. Send it via AJAX, for example
                return false; // returning false to prevent real form.submit();
            }
        }
    }
}

And the button in the form should just call form.submit();.

File /view/userRegistration/FormPanel.js

        {
            xtype: 'button',
            text : 'Register',
            handler: function() {
                var form = button.parent;
                if (form.isValid()) {
                    form.submit();
                }
            }
        }