ExtJS监听键盘事件：回车键实现登录功能

时间：2013-09-07 编辑：简简单单来源：一聚教程网

首先，我们定义一个表单，代码如下：

代码如下

复制代码

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，然后做具体操作

上一个： WordPress文章显示评论内容而不是标题
下一个： ExtJS4 MVC模式入门级开发案例

推荐专题

最新下载

热门教程

ExtJS监听键盘事件：回车键实现登录功能

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程