Sencha Touch:输入密钥以提交表单

时间:2015-03-04 18:46:46

标签: javascript extjs javascript-events sencha-touch sencha-touch-2

我有一个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: 'email@example.com',
                        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!)。有没有人建议我可能做错了什么?

1 个答案:

答案 0 :(得分:2)

您的代码中似乎存在多个问题。

  • 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:

我不认为这是详尽无遗的。一定有更多问题。

请阅读文档,不要尝试通过反复试验进行编码。这不是一个好的编程习惯。