I have a Sencha Touch code base and I wanted to be able to use the "Enter" key to submit the initial log in to the application instead of having to click the button on a desktop. Here is my Login
view:
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'
}
]
}
]
}
});
And here is my Login
controller:
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
However, this seems to not do anything (that is, not even the console.log
appears in the console!). Does anyone have have suggestion as to what I could be doing wrong?
It looks like there's more than one issue in your code.
control
doesn't target your password field. The key password
references an component with xtype password
. The correct way to reference it is either passwordfield
if you never have more than one of them or 'passwordfield[name="password"]'
.
the purpose of refs
is to create a method of the controller like this.getPassword()
to get the password field. Also the way you define it is invalid. It must be like refs: [{ref: 'password', selector: 'passwordfield[name="password"]'
you must not nest configurations inside a config
property. extend: "Ext.app.Controller", config: { views:
should be extend: "Ext.app.Controller", views:
I don't think this is exhaustive. There must be more issues.
Please read the documentation and don't try to code by trial and error. It is not a good programming practice.