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


          ExtJS为我们封装了完整的键盘监听事件,我们只要调用相应的接口就能完美的实现键盘监听。在所有的键盘事件中,按回车键提交表单,实现登 录的功能是我们最常用到的键盘监听事件,下面李坏给出一个实现回车键提交表单的案例,希望能给ExtJS的新手朋友们提供帮助。
          首先,我们定义一个表单,代码如下:

    Ext.define('Demo.view.Viewport', {
        extend: 'Ext.container.Viewport',
        items:[{
            xtype: 'form',
            title: 'ExtJS监听键盘事件',
             500,
            height: 400,
            margin: '100 0 0 200',
            defaults:{
                xtype: 'textfield',
                 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学习

  • 相关阅读:
    [ACM]HDU Problem 2000 + Java
    [测试开发面试]zyb面试题总结
    [ACM]HDU Problem 1001 + Java
    [ACM]HDU Problem 1002 + Java
    [ACM]HDU Problem 1000 + Java
    [Intellij Idea]激活与配置
    [Android开发]合集(随时更新)
    [Android开发]前端样式设计合集(随时更新)
    [Android开发]emulator无法启动的问题
    [Intellij Idea] IDE使用技巧帖集合(随时更新)
  • 原文地址:https://www.cnblogs.com/itleeblog/p/3274622.html
Copyright © 2020-2023  润新知