文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Ext.js4.2.1中事件机制的示例分析

2023-06-04 11:54

关注

这篇文章主要为大家展示了“Ext.js4.2.1中事件机制的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Ext.js4.2.1中事件机制的示例分析”这篇文章吧。

一: 简介

Ext中的事件遵循树状模型,和事件相关的类主要有这么几个:Ext.util.Observable,Ext.lib.Event,Ext.EventManager和Ext.EventObject.
Ext使用Ext.lib.Event,Ext.EventManager和Ext.EventObject对原生浏览器事件进行了封装,最后给我们用的是一套统一的跨浏览器的通用事件接口。

二:Ext.util.Observable

Ext.util.Observable在Ext事件模型中有举足轻重的地位,位于Ext组件的顶端,为Ext组件提供处理事件的最基本功能。所有继承自Ext.util.Observable类的控件都可以支持事件。

  1. Ext.onReady(function() {

  2.         var test = Ext.get("test");

  3.         var test2 = Ext.get("test2");

  4.         //test.on("click", function() {

  5.         //    alert("handler1");

  6.         //});

  7.         //test.on("click", function() {

  8.         //    alert("handler2");

  9.         //});

  10.         Ext.define('People', {

  11.             config : {

  12.                 name : ''

  13.             },

  14.             //extend : Ext.util.Observable,

  15.             mixins : {

  16.                 observable : 'Ext.util.Observable'

  17.             },

  18.             info : function(event) {

  19.                 return this.name + " is " + (event ? "ing" : "doing nothing");

  20.             },

  21.             constructor : function(config) {

  22.                 var me = this;

  23.                 me.addEvents({

  24.                     'walk' : true,

  25.                     'eat' : true

  26.                 });

  27.                 me.initConfig(config);

  28.                 me.mixins.observable.constructor.call(this, config);

  29.             }

  30.         });

  31.         var people = Ext.create("People", {

  32.             name : "Alex"

  33.         });

  34.         people.on("walk", function() {

  35.             this.state = "walk";

  36.             Ext.Msg.alert("event", this.name + " is walking");

  37.         });

  38.         people.on("eat", function() {

  39.             this.state = "eat";

  40.             

  41.             Ext.Msg.alert("event", this.name + " is eating");

  42.         });

  43.         test.on("click", function() {

  44.             people.fireEvent("walk");

  45.         });

  46.         test2.on("click", function(e) {

  47.             alert(this.getX()+" , "+this.getY());

  48.             alert(e.getTarget().value);

  49.             people.fireEvent("eat");

  50.         });

  51.     });


三:Ext.lib.Event

Ext.lib.Event是一个工具类,实际中很少直接用到这个类,只是与事件相关的那些操作最后都会归结为对这些底层函数的调用。
getX(),getY(),getXY()获得发生的事件在页面中的坐标位置。

getTarget() 返回事件的目标元素。

preventDefault() 用于取消浏览器当前事件所执行的默认操作,比如阻止页面跳转。

stopPropagation() 停止事件传递。

stopEvent() 相当于调用preventDefault()和stopPropagation()两个函数

四:Ext.EventManager

Ext.EventManager 作为事件管理器,定义了一系列事件相关的处理函数,其中最常用的就是onDocumentReady和onWindowResize

Ext.onReady()就是Ext.EventManager.onDocumentReady()的简写形式,它会在页面文档渲染完毕

五:Ext.EventObject

Ext.EventObject是对事件的封装,它提供了丰富的工具函数,帮助我们获得事件相关的信息。通过Ext.EventObject帮助文档可以了解到,它包含的许多函数都与Ext.lib.Event中的函数功能是相同甚至同名的,如getPageX()、getPageY()、getPageXY()和getTarget()等,这些函数实际上都是通过Ext.lib.Event实现的。


Ext.EventObject对Ext.lib.Event扩展的部分是对鼠标事件和按键事件的增强,定义了一系列按键,可以用来判断某个键是否被按下:


Ext.get("text").on("keypress", function (e) {
    if (e.getKey() == Ext.EventObject.SPACE) {
        Ext.Msg.alert("提示", "你按了空格键!");
    }
});

以上是“Ext.js4.2.1中事件机制的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯