【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监听事件】ExtJS监听键盘事件：回车键实现登录功能

http://m.bbyears.com/wangyezhizuo/42706.html

推荐访问: