Sencha Touch:回车键提交表单
Sencha Touch: Enter key to submit form
我有一个 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
都没有出现在控制台中!)。有没有人对我可能做错了什么提出建议?
您的代码中似乎存在不止一个问题。
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:
我认为这还不够详尽。问题一定更多。
请阅读文档,不要尝试通过反复试验来编写代码。这不是一个好的编程习惯。
我有一个 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
都没有出现在控制台中!)。有没有人对我可能做错了什么提出建议?
您的代码中似乎存在不止一个问题。
control
没有针对您的密码字段。键password
引用 xtypepassword
的组件。正确的引用方式是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:
我认为这还不够详尽。问题一定更多。
请阅读文档,不要尝试通过反复试验来编写代码。这不是一个好的编程习惯。