PDA

View Full Version : setfocus to other textfield after enterkey is pressed



sunrong
21 Nov 2010, 6:26 PM
there is a formpanel containing several textfields.

code like this:

var simple = new Ext.FormPanel({
labelWidth: 75,
frame:true,
bodyStyle:'padding:5px 5px 0',
width: 350,

defaults: {width: 150},
defaultType: 'textfield',
items: [{xtype:'box',
width:350,
autoEl:{
tag:'div',
html:'<br><div class="app-msg" font-size="26"><img src="themes/default/images/businessman2.png" class="app-img"/>&nbsp;&nbsp;&nbsp;&nbsp;welcome</div><br>'
}
},
{
fieldLabel: 'username',
id:'username',
name: 'username',
allowBlank:false,
blankText:'enter yourname'
},new Ext.form.Field({
inputType:'password',
fieldLabel: 'password',
allowBlank:false,
name: 'passwd'
}),{
fieldLabel: 'code',
name: 'valid',
allowBlank:false,
id:'valid',
width:95,
blankText:'enter code'
}
],

buttons: [{
text: 'Login',
type: 'submit',
handler:function(){
if(simple.form.isValid()){
simple.form.doAction('submit',{
url:'index.php?action=login',
method:'post',
params:'',
success:function(form,action){
if (action.result.msg=='OK') {
document.location='index.php?model=main';
} else {
Ext.Msg.alert('error',action.result.msg);
}
},
failure:function(){
Ext.Msg.alert('error');
}
});
}
}
},{
text: 'cancel',
handler:function(){simple.form.reset();}
}],
keys:[{
key:Ext.EventObject.ENTER,
fn: function(){},
scope:this
}]
});

i want to circulate focus on the 3 textfield after enter key is pressed.


thanks

jay@moduscreate.com
25 Nov 2010, 4:12 PM
Sun, you should really post code within [ code ] tags! What you could do is setup a key handler on each of the fields, each focusing the next item in the set. Or you can setup a key handler in the form panel, focusing each text field item by item index, wrapping to item zero after the last focused item has had 'enter' pressed.

All of that said, ENTER is generally used to SUBMIT the form, and TAB is used to pop to the next field!