首页 > 其他分享> 文章详细

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

2022-07-25 08:34:28 阅读：250 来源： 互联网

标签：监听 ExtJS 键盘 Ext Events 事件 ENTER Mouse event

更新记录
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");
    }
});

标签：监听,ExtJS,键盘,Ext,Events,事件,ENTER,Mouse,event
来源： https://www.cnblogs.com/cqpanda/p/16483346.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9