Sencha Touch：输入键提交表单

Posted 2023-02-25

【中文标题】Sencha Touch：输入键提交表单

【英文标题】：Sencha Touch: Enter key to submit form

【发布时间】：2015-03-04 18:46:46

【问题描述】：

我有一个 Sencha Touch 代码库，我希望能够使用“Enter”键将初始登录提交到应用程序，而不必单击桌面上的按钮。这是我的Login 观点：

Ext.define('App.view.Login', 
    extend: 'Ext.form.Panel',
    alias: 'widget.login',

    requires:[
        'Ext.form.FieldSet',
        'Ext.field.Email',
        'Ext.field.Password'
    ],

    config: 
        items: [
            
                xtype: 'toolbar',
                docked: 'top',
                title: 'App'
            ,
            
                xtype: 'fieldset',
                margin: '.5em .5em 1.5em',
                title: 'Login',
                items: [
                    
                        xtype: 'emailfield',
                        name: 'email',
                        placeHolder: '[e-mail]',
                        required: true
                    ,
                    
                        xtype: 'passwordfield',
                        name: 'password',
                        placeHolder: 'password',
                        required: true,
                    
                ]
            ,
            
                xtype: 'container',
                layout: 
                    type: 'vbox'
                ,
                margin: '10px',
                items:[
                    
                        xtype: 'button',
                        margin: '10px',
                        itemId: 'login',
                        text: 'Login'
                    
                ]
            
        ]
    
);

这是我的Login 控制器：

Ext.define("App.controller.Login", 
    extend: "Ext.app.Controller",
    config: 
        views: ["Login", "user.Home"],
        stores: ["LoginInstance"],
        refs: 
            password: 'passwordfield[name="password"]',

            login: 
                autoCreate: true,
                selector: "login",
                xtype: "login"
            
        ,
        control: 
            password: 
                keyup: function(field, e) 
                    if(e.event.keyCode === 13) 
                        console.log('Do login');
                        this.onLoginTap();
                    
                
            ,
            "login #login": 
                tap: "onLoginTap"
            ,

            // ...

        
    ,

    onLoginTap: function()  ...  // do the login

但是，这似乎没有做任何事情（也就是说，即使console.log 也不会出现在控制台中！）。有没有人对我可能做错了什么有建议？

【问题讨论】：

看起来可能是范围问题...

抱歉，我修正了我的格式。 onLoginTap 在 Ext.define 块内正确定义，而不是在其外。你指的是这个还是别的什么？

【参考方案1】：

您的代码中似乎存在不止一个问题。

control 不针对您的密码字段。键 password 引用了 xtype password 的组件。引用它的正确方法是passwordfield，如果你从来没有超过一个，或者'passwordfield[name="password"]'。

refs 的目的是创建一个类似this.getPassword() 的控制器方法来获取密码字段。您定义它的方式也是无效的。一定是refs: [ref: 'password', selector: 'passwordfield[name="password"]'

您不能将配置嵌套在 config 属性中。 extend: "Ext.app.Controller", config: views: 应该是 extend: "Ext.app.Controller", views:

我认为这并不详尽。应该还有更多的问题。

请阅读文档，不要尝试通过反复试验来编写代码。这不是一个好的编程习惯。

【讨论】：

你是完全正确的。即使我知道是这样，我下面的“答案”也完全不正确。我发布在我的代码确实可以达到预期的效果。问题是我的测试用户没有与之关联的完整电子邮件，而只有一个用户名。由于第一个字段是emailfield，因此按下Enter 捕获了一个（隐藏）事件，该事件给出了一个错误，抱怨电子邮件地址格式错误，而不是我自己的。

我相信 config 对象的使用在 Sencha Touch 中可能是可以接受的，但您必须通过阅读文档来确定。