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'
        }]
    }]
});

      界面效果如图所示:
extjs键盘监听事件:回车登录功能
      然后,对密码框设置监听事件,代码:

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

源码下载

【技术交流,欢迎大家拍砖】

  1. 小说精选 说道:

    这个例子通俗易懂