PDA

View Full Version : How submit form on Enter key press.



steve25
8 Oct 2013, 5:41 AM
I have created a login form with text fields and a checkbox - see below.
If user clicks the 'Login' button the form is submitted.

I also require that the form is submitted if the user hits the Enter key
whilst in any of the fields on the form.

Please can you let me know a/the best way of doing this. I am using the MVC
model and so ideally I'd like the event to be handled in the Login.js
controller - i.e. within this.control(...).

using extjs 4.2



//controller:
//Login.js

Ext.define('App.controller.Login', {
extend: 'Ext.app.Controller',
init:function () {
this.control({

'button[action=login]':{
click:this.login
}
});
},
views:[
'Login', 'Viewport'
],
refs:[
{
ref:'viewport',
selector:'viewport'
},
{
ref:'loginwindow',
selector:'loginwindow'
},
{
ref:'loginform',
selector:'loginform'
}
],

login:function () {
var loginform = Ext.getCmp('loginform');

loginform.getForm().submit({
method:'POST',
url:'login_check.action',
scope: this,

success:function(loginform,action){

console.log("login success");

}
});
}

});

//view:
//Login.js


Ext.define('App.view.LoginMain', {
extend:'Ext.panel.Panel',
alias:'widget.LoginMain',
id:'loginmain',
layout: {
type: 'vbox',
align: 'center'
},
renderTo: Ext.getBody(),
items: [
{
xtype: 'LoginFrm',

}

]
});

Ext.define('App.view.LoginFrm', {
extend:'Ext.panel.Panel',
alias:'widget.LoginFrm',
id:'loginfrm',
width:420,
height:280,
layout:'border',
renderTo: Ext.getBody(),
initComponent:function () {

Ext.apply(this, {
items: [
{
xtype:'form',
height: 100,
width: 150,
id:'loginform',
region:'center',
layout:{
type:'vbox'
},
items:[
{
html: 'Login',
width: 170,
height: 30
},
{
itemId:'userName',
xtype:'textfield',
fieldLabel:'Username',
width: 215,
name:'username',
allowBlank:false
},
{
xtype:'textfield',
fieldLabel:'Password',
name:'password',
allowBlank:true,
inputType:'password',
width: 215,
enableKeyEvents:true
},
{
xtype: 'checkboxfield',
name: 'resetPwd',
boxLabel: 'Forgotten password',
uncheckedValue: false
}
]
},
{
xtype: 'panel',
region: 'south',
height: 40,
items: {
xtype:"button",
action:"login",
text: 'Login',
width:'90px'
}
}
]
});
this.callParent(arguments);
},
defaultFocus:'userName'
});

Ext.define('App.view.Login', {
extend:'Ext.panel.Panel',
alias:'widget.view.Login',

id:'loginwindow',
layout:'border',

initComponent:function () {

Ext.apply(this, {
items:[
{
xtype: 'panel',
layout: {
type: 'vbox',
align: 'center',
pack: 'center'
},
items: {
xtype: 'LoginMain'
},
region: 'center'
},
{
xtype: 'container',
height: 30,
region: 'south'
}]

});
this.callParent(arguments);
},
defaultFocus:'userName'
});


// app.js:


Ext.Loader.setConfig({enabled:true});
Ext.application({

appFolder:'app',
name: 'App',

controllers: [
'Login'
],
launch: function() {

Ext.create('App.view.Viewport', {
});
}

});

// index.html:

<html>
<head>

<title>Keypress</title>

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all-gray.css">
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="app.js"></script>

</head>
<body></body>
</html>

Farish
8 Oct 2013, 5:48 AM
you can add listener to a field to catch keyboard events. E.g.



listeners:
{
specialkey: function(field, e){
if (e.getKey() == e.ENTER)
submitForm(); // call your function to submit the form
}
}

ettavolt
10 Oct 2013, 12:17 AM
Note: with MVC you can have a single listener for all fields.
Something like:

this.listen({
component:{
'form > [isFormField]':{
specialkey:this.submit
}
}
})