ExtJS-事件管理-鼠标事件（Mouse Events）

更新记录
2022年7月25日 发布。
2022年7月16日 从笔记迁移到博客。

ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html

鼠标事件（Mouse Events）

说明#

键盘事件（Keyboard events）

实例：表单文本框监听键盘弹起事件#

需要先开启键盘事件支持enableKeyEvents: true
然后再监听键盘对应的事件即可

Ext.create({
    xtype: 'textfield',
    labelWidth: 170,
    labelAlign:'top',  //对齐方式，top|bottom|left|right
    fieldLabel: 'UserName',
    name: 'UserName',
    msgTarget: 'under',
    renderTo: Ext.getBody(),
    enableKeyEvents : true, //开启键盘事件
    listeners: {
        keyup:{  //监听按钮弹起事件
            fn:function( thisField, evt, eOpts ){
                //监听回车键
                if(evt.getCharCode() === evt.ENTER){
                    if (thisField.getValue()!=''){
                        Ext.Msg.alert('Alert','Welcome: '+ thisField.getValue() );
                    }
                }
            }
        }
    }
});

DOM键盘事件#

使用keyMap()方法#

在Ext.event.Event类型提供基本所有的键盘按键
比如Enter按键：

Ext.event.Event.ENTER

使用Ext.util.KeyMap类型将键盘事件绑定到处理函数

//创建键盘事件绑定
var map = new Ext.util.KeyMap({
    //事件目标
    target: this.getView().getEl(),
    //键盘事件监听按钮
    key: Ext.event.Event.ENTER,
    //处理函数
    fn: this.onEnterPress,
    //作用域
    scope: this
});

使用DOM事件监听#

Ext.getCmp('textPanel').getEl().on('keydown', function(f, e) {
    if (e.getKey() === Ext.EventObject.ENTER)
    {
        //do whatever you want here
    }
});

实例：监听文本域的回车按钮事件#

//组件定义
{
    xtype: 'textfield',
    fieldLabel: 'Username',
    id: "pandaTest",
},
    
//绑定逻辑
var panelComponent = Ext.getCmp('pandaTest');
panelComponent.getEl().on('keypress',function (event,dom) {
    if(event.getKey() == Ext.EventObject.ENTER)
    {
        Ext.Msg.alert("温馨提示","按下ENTER");
    }
});

实例：监听键盘数值按钮#

//组件定义
{
    xtype: 'textfield',
    fieldLabel: 'Username',
    id: "pandaTest",
},

//绑定逻辑
var panelComponent = Ext.getCmp('pandaTest');
panelComponent.getEl().on('keypress',function (event,dom) {
    if(event.getKey() == Ext.EventObject.ONE)
    {
        Ext.Msg.alert("温馨提示","按下1");
    }

    if(event.getKey() == Ext.EventObject.TWO)
    {
        Ext.Msg.alert("温馨提示","按下2");
    }
});