事件(ExtJs Event)

Ext.Util.observable类 

Ext.Util.observable是一个接口,为Ext组件的事件提供了支持,组件的事件不同于传统事件,所以需要有这么一套事件体系。只有实现了该接口的组件才具有那些特殊的事件。

Ext.EventObjectImpl类 

Dom中原始的Event对象被ExtJs封装为Ext.EventObjectImpl。也即在ExtJs中Ext.EventObjectImpl就代表了原始的Event对象,它存储了事件发生时的信息。每个侦听器函数的参数中的那个e正是Ext.EventObjectImpl。

getX() | getY() | getXY()
//获取事件发生时,触发事件的对象在文档中的x、y坐标。最后一个方法返回数组,getXY( )[0]得到x坐标,getXY( )[1]得到y坐标

getTarget()
//获取触发事件的源对象

preventDefault(bool)
//是否阻止浏览器默认动作

stopPropagation(bool)
//是否阻止事件冒泡

stopEvent()
//立即停止事件,该方法内部自动调用preventDefault()和stopPropagation()两个函数,取消浏览器的默认操作,同时停止事件冒泡

purgeElement()
//清除该对象上绑定的所有事件

注册侦听

//在组件的配置中添加listeners监听
listeners :{
        focus:function(){
            alert("ssssss")
        }
}

//组件渲染完成后在外部注册事件监听
gridPanel.on('itemmouseenter', function () {}
//或
gridPanel.addListener('rowclick', function () {}

批量注册侦听

listeners :{
        focus:function(){alert("ssssss")},
        click:function(){}
}

var link = Ext.fly("link");
link.on("click", function (e) {
    e.preventDefault(true);
    Ext.Msg.alert("", "click Event");
}).on("mouseout", function () {
    Ext.Msg.alert("", "mouseout Event");
});

在外部批量注册监听

var button = Ext.create('Ext.Button');
button.on({
    mouseover: function () {
        //Do something
    },
    mouseover: function () {
        //Do something
    }
});

为Dom元素批量注册监听

var div = Ext.get('box');
div.on({
    mouseover: function () {
        //Do something
    },
    mouseover: function () {
        //Do something
    }
});

侦听作用域

通过scope配置事件侦听器的运行环境,因为函数运行在对象上,有时候这个对象可能并非你所期望的对象,此时直接通过配置scope明确指定运行函数的是哪个对象即可。

Ext.onReady(function () {
    var btn = new Ext.button.Button({ text: "hello" });
    new Ext.window.Window({
        title: "widnow",
        width: 200,
        height: 100,
        listeners: {
            show: function () {
                Ext.Msg.alert("", this.text)//显示按钮的text
            },
            scope: btn//更改函数执行环境
        }
    }).show();
});

侦听拦截

通过在绑定了事件的对象上调用suspendEvents()方法预先阻止某个事件,这样,当事件发生时,事件侦听器不会执行。

var btn1 = new Ext.button.Button({
    text: "mouseover",
    renderTo: Ext.getBody(),
    listeners: {
        mouseover: function () { Ext.Msg.alert("", "mouseover Event"); }
    }
});

var btn2 = new Ext.button.Button({
    text: "挂起",
    renderTo: Ext.getBody(),
    listeners: {
        click: function () {
            btn1.suspendEvents();
        }
    }
});

侦听恢复

通过在绑定了事件的对象上调用resumeEvents()方法恢复被拦截的事件。

var btn1 = new Ext.button.Button({
    text: "mouseover",
    renderTo: Ext.getBody(),
    listeners: {
        mouseover: function () { Ext.Msg.alert("", "mouseover Event"); }
    }
});

var btn2 = new Ext.button.Button({
    text: "挂起",
    renderTo: Ext.getBody(),
    listeners: {
        click: function () {
            btn1.suspendEvents();
        }
    }
});

var btn2 = new Ext.button.Button({
    text: "恢复",
    renderTo: Ext.getBody(),
    listeners: {
        click: function () {
            btn1.resumeEvents();
        }
    }
});

侦听解绑

通过在绑定了事件的对象上调用un()方法可对侦听进行解绑。解绑需要知道侦听器的名字,而通常我们都是使用匿名函数注册事件,想要解绑貌似只有将侦听器写在全局并命名该函数,但还有一个更简单的办法,而为了不在外部写侦听器,可以考虑将侦听器注册在window对象上,便于解绑。

var btn1 = new Ext.button.Button({
    text: "mouseover",
    renderTo: Ext.getBody(),
    listeners: {
        mouseover: window.show = function () { Ext.Msg.alert("", "mouseover Event"); } //解绑侦听需要函数的名字作为参数才能解绑,而为了不在外部写侦听器,可以考虑将侦听器注册在window对象上,便于解绑。
    }
});

var btn2 = new Ext.button.Button({
    text: "解绑",
    renderTo: Ext.getBody(),
    listeners: {
        click: function () {
            btn1.un("mouseover", window.show);
        }
    }
});

手动触发

<div id="fire">点击我后会触发文本框的失焦事件</div>
var formPanel = new Ext.form.FormPanel({
    title: 'form',
    renderTo:Ext.getBody(),
    width: 300,
    height: 125,
    items: [
            { xtype: 'textfield', id: 'text', fieldLabel: '哲学家', listeners: { blur: function () { Ext.Msg.alert("", this.getValue()); } } }
    ]
});

Ext.get('fire').on('click', function () {
    //当id为fire的div被点击时,手工触发下拉框的select事件
    var textfield = formPanel.getForm().findField('text');
    textfield.fireEvent('blur');
})

Javascript - 学习总目录

Javascript - ExtJs - 事件的更多相关文章

  1. Javascript - ExtJs - GridPanel组件

    GridPanel组件(Ext.grid.GridPanel)logogram:Ext.grid.Panel | xtype:gridpanel 此类派生自Ext.Panel,创建表格需要两个必须的对 ...

  2. 63.ExtJs事件(自定义事件、on、eventManager)示例

    转自:https://blog.csdn.net/leadergg/article/details/5927614?utm_source=blogxgwz5 ExtJs事件(自定义事件.on.even ...

  3. jQuery $(document).ready()和JavaScript onload事件

    jQuery $(document).ready()和JavaScript onload事件 Why we need a right time? 对元素的操作和事件的绑定需要等待一个合适的时机,可以看 ...

  4. Javascript事件模型系列(四)我所理解的javascript自定义事件

    被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...

  5. javascript通用事件封装

    随着最近几年Html5的兴起,越来越多的应用采用html5进行实现,一个优秀的网页应用不但需要美观简洁的UI界面,更需要一个良好的交互.网页应用大部分的交互需要用javascript事件进行实现.虽然 ...

  6. javascript的事件

    前戏 今天在博客中看到了javascript的事件机制,就自己试试写一个简单的冒泡捕获测试,但是测试结果出乎了我的意料,主要是自己原来对事件了解不是很清楚,现在写篇博客记录下. 基础 先来看一下我在A ...

  7. javascript对象事件绑定方法

    javascript对象事件绑定方法 今天在做对象事件绑定的过程中出现了一点异外情况,由于事件方法是由参数传过来的,需要将当前对象call过去,方便方法体里直接调用this 错误写法 obj.oncl ...

  8. JavaScript的事件代理(转)

    如果你想给网页添加点JavaScript的交互性,也许你已经听过JavaScript的事件代理(event delegation),并且觉得这是那些发烧友级别的JavaScript程序员才会关心的什么 ...

  9. [转]javascript指定事件处理程序包括三种方式:

    javascript指定事件处理程序包括三种方式: (1):DOM0级事件处理程序 如: 代码如下: var btn=document.getElementById("mybtn" ...

随机推荐

  1. Unity 光照着色器

    光照着色器需要考虑光照的分类,一般分为漫反射和镜面反射. 漫反射计算基本光照: float brightness=dot(normal,lightDir)    将法线和光的入射方向进行点积运算,求出 ...

  2. POJ 3522 Slim Span(极差最小生成树)

    Slim Span Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 9546   Accepted: 5076 Descrip ...

  3. (set)MG loves gold hdu6019

    MG loves gold Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others) ...

  4. 字符输入流 FileReader

    package cn.lideng.demo3; import java.io.FileNotFoundException; import java.io.FileReader; public cla ...

  5. jmeter每10个停一会实现方案

    foreach控制器中加个if控制器,if控制器条件${__groovy("${__counter(TRUE,)}".toInteger() % 10 == 0,)},再往if控制 ...

  6. docker-compose 案例

    官网示例: 安装wordpress version: " services: db: image: mysql:5.7 volumes: - db_data:/var/lib/mysql r ...

  7. eclipse编译hbase 1.3.1(转)

    https://yq.aliyun.com/articles/59830   ,晚上回去试试...

  8. Linux记录-I/O系统监控

    几个基本的概念 在研究磁盘性能之前我们必须先了解磁盘的结构,以及工作原理.不过在这里就不再重复说明了,关系硬盘结构和工作原理的信息可以参考维基百科上面的相关词条——Hard disk drive(英文 ...

  9. Mysql:性能优化

    性能优化 优化MySQL数据库是数据库管理员和数据库开发人员的必备技能.MySQL优化,一方面是找出系统的瓶颈,提高MySQL数据库的整体性能:一方面需要合理的结构设计和参数调整,以提高用户操作响应的 ...

  10. Spark源码剖析 - SparkContext的初始化(八)_初始化管理器BlockManager

    8.初始化管理器BlockManager 无论是Spark的初始化阶段还是任务提交.执行阶段,始终离不开存储体系.Spark为了避免Hadoop读写磁盘的I/O操作成为性能瓶颈,优先将配置信息.计算结 ...