Question

我有一个表单，并且有一个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
    }
});

Answer 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();
                }
            }
        }

Answer 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
         ...
    }
});

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

Answer 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();
        }
    }
}

Answer 5

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

Answer 6

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

submitOnAction：FormPanel配置中的true

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

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

听取提交按钮的点击事件以添加Ajax呼叫

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

6 个答案: