ExtJS监听键盘事件:回车键实现登录功能
ExtJS为我们封装了完整的键盘监听事件,我们只要调用相应的接口就能完美的实现键盘监听。在所有的键盘事件中,按回车键提交表单,实现登 录的功能是我们最常用到的键盘监听事件,下面李坏给出一个实现回车键提交表单的案例,希望能给ExtJS的新手朋友们提供帮助。
首先,我们定义一个表单,代码如下:
Ext.define('Demo.view.Viewport', {
extend: 'Ext.container.Viewport',
items:[{
xtype: 'form',
title: 'ExtJS监听键盘事件',
width: 500,
height: 400,
margin: '100 0 0 200',
defaults:{
xtype: 'textfield',
width: 300,
labelWidth: 120,
margin: '20 0 0 30'
},
items:[{
fieldLabel: '用户名',
name: 'username'
},{
fieldLabel: '密 码',
name: 'password',
inputType: 'password',
//改配置项必须设置为true,默认false
enableKeyEvents: true
}],
bbar:[{
text: '登录',
action: 'login'
},{
text: '重置',
action: 'reset'
}]
}]
});

然后,对密码框设置监听事件,代码:
Ext.define('Demo.controller.Controller', {
extend: 'Ext.app.Controller',
init:function(){
this.control({
'viewport > form textfield[name=password]':{
keypress: this.userLogin
}
})
},
userLogin:function(b,e,eOpts){
//e.getKey()是获取按键的号码,13代表是回车键
if(e.getKey() == 13){
Ext.Msg.alert('提示','您已经按下了回车键,可以在这里提交表单做登录操作了... ...')
}
}
});
ExtJS键盘事件详解:
1.首先要将需要监听的输入框设置为允许使用键盘事件(enableKeyEvents: true),否则键盘事件不可用;
2.使用getKey()方法判断按键是否为自己设置的按键,具体按键号码可参照ExtJS给出的api,然后做具体操作。
文章来源:ExtJS学习
浙公网安备 33010602011771号