禁用 Go 按钮提交表单（Sencha Touch 2、Cordova、Android）答案

【问题标题】：Disable the Go button from submitting the form (Sencha Touch 2, Cordova, Android)禁用 Go 按钮提交表单（Sencha Touch 2、Cordova、Android）
【发布时间】：2013-01-15 10:58:42
【问题描述】：

我有一个表单，并且有一个 button 提交它。我希望只有在点击“注册”按钮时才能执行提交。但是当用户在任何textfield 中输入一些文本并按下“Go”（又名“Enter”）按钮时。表单提交了，我对此无能为力。

在 Android v2.3.6 上的 Samsung Galaxy S (GT i9000) 上发现此行为。但 Android 4 的 HTC 表现得如我所愿。

submitOnAction:false 没有帮助。 beforesubmit 也是。代码清单中的任何解决方案都不起作用。

我只是不希望表单以任何其他方式提交，除了按“注册”按钮！

文件/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();
                        }
                    }
                }
            }
        ]
    }
});

文件/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
    }
});

【问题讨论】：

您可以断开注册按钮与表单字段的连接。监听按钮上的点击，然后手动提交表单（我不确定您使用的提交方法）。

标签： android cordova sencha-touch sencha-touch-2

【解决方案1】：

问题出在onSubmit() 方法中。 sencha-touch-all-debug.js中的@private：

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

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

}

所以在子类中重写onSubmit() 是绝对不正确的。更正确的方法。

文件/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();
            }
        }
    }
}

表单中的按钮应该只调用form.submit();。

文件/view/userRegistration/FormPanel.js

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

【讨论】：

【解决方案2】：

您实际上并不需要为此重写 FormPanel。在控制器中，您可以阻止来自现场的动作执行并冒泡。

Ext.define('TestApp.controller.Login', {
    extend: 'Ext.app.Controller',
    config: {
        control: {
            'field': {
                action: 'onFieldAction'
            }
        }
    },
    onFieldAction: function(field, e) {
        // Stop event here 
        e.stopEvent();
        e.stopPropagation();
    }
});

我在执行此操作时遇到了一个问题。我不小心覆盖了我的 FormPanel 的默认初始化函数。如果你这样做，一切都将不起作用

Ext.define('TestApp.view.Login', {
    extend: 'Ext.form.Panel',
    xtype: 'loginform',
    config: {
        ...
    }
    initialize: function(config) {
         this.callParent(arguments); // Nothing will work without this line
         ...
    }
});

【讨论】：

【解决方案3】：

以防万一有人需要禁用键盘上的 Enter 键或软键盘中的 Go 按钮，我找到了以下解决方案：

Ext.define('App.view.Login', {
    extend: 'Ext.form.Panel',
    xtype: 'login',

    config: {
        ....
    },

    getElementConfig: function() {
        var config = this.callParent();
        config.children.pop();

        return config;
    }
});

【讨论】：

【解决方案4】：

document.addEventListener("keypress", onGoKeyDown, false);
function onGoKeyDown(e) {
    console.log(e);
    if(e.srcElement.localName == 'input') {
        if (e.keyCode === 13 || e.keyCode === 10) {
            e.preventDefault();
        }
    }
}

【讨论】：

【解决方案5】：

我不知道是否有人仍在寻找解决方案，但我想出了一个非常简单的技巧 - 捕获输入并阻止表单提交，即使用户点击“Go”或任何其他按钮/键你想要的那个。为此，只需在每个输入字段中放置一个侦听器并侦听“模糊”事件。这将在离开现场时捕获任何动作（模糊）。在 blur 侦听器事件中，在下一个字段上执行 focus()（例如在表单中切换，即，如果您在字段 1 中，则将焦点发送到 2，依此类推），直到您到达所需的提交或注册按钮。在那里，您可以进行处理、提交等。这对我有用！

【讨论】：

【解决方案6】：

现在，如果我们想在提交时通过单击提交按钮或输入操作来调用 Ajax 方法，

submitOnAction : 在 FormPanel 配置中为真

在初始化方法中添加 this.callParent(arguments)，以防我们覆盖 FormPanel 的初始化方法

重写FormPanel的submit方法以添加Ajax Call

监听提交按钮的点击事件以添加 Ajax 调用

【讨论】：