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学习