2

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

在 Android v2.3.6上的三星 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
    }
});
4

6 回答 6

2

问题出在onSubmit()方法上。它@private在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();
        }
    }

}

所以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();
                }
            }
        }
于 2013-01-16T15:12:31.817 回答
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
         ...
    }
});
于 2013-07-24T04:00:02.747 回答
1

以防万一有人需要禁用键盘上的 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;
    }
});
于 2016-02-19T14:27:45.000 回答
1 
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();
        }
    }
}
于 2016-03-10T15:21:03.487 回答
0

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

于 2014-06-26T22:36:20.917 回答
0

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

submitOnAction : 在 FormPanel 配置中为 true

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

覆盖 FormPanel 的提交方法以添加 Ajax 调用

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

于 2016-01-19T09:35:44.927 回答