EXTjs 学习笔记(二)--事件驱动

原创 2018年04月16日 17:08:50

EXT事件包括两大类,一种类是浏览器事件,另一类是自定义事件。

1  获取事件源

入口函数。获取dom使用Ext.get(),绑定事件的关键字为on

Ext.onReady(function() {
	Ext.get('test').on('click',function() {
	    alert("哈哈");
	});
});
<input type="button" id="test" value="测试">

2  自定义事件绑定

    1 创建类

//定义一个person原型类:初始化了名字和事件名称
Person = function(name) {
	this.name = name;
	//定义事件名称
	this.addEvents('walk','eat','sleep');
};
//添加自定义事件
//通过继承,Person 类拥有了Ext.util.Observable下的所有方法
Ext.extend(Person,Ext.util.Observable,{
	//定义了一个名为info的函数
	info: function() {
		return this.name + "is" + event + 'ing.';
	}
});

    2 在页面中绑定事件

        

<script type="text/javascript">
			Ext.onReady(function() {
				var person = new Person('Lingo');
				person.on('walk',function() {
					Ext.Msg.alert(person.name + 'walk');
				});
				person.on('eat',function() {
					Ext.Msg.alert(person.name + 'eat');
				});
				person.on('sleep',function() {
					Ext.Msg.alert(person.name + 'sleep');
				});
                            Ext.get('test').on('click',function() {
			        person.fireEvent('walk');
                    )};
重点:定义事件名称:addEvents('','','');
触发事件:fireEvent();

on绑定事件可以有多个参数,依次为事件源,函数,作用域,复合式参数

on(event,fun,scope,{})

其中复合式参数分别有 single,delay,testId(默认为4), buffer

同样支持多事件绑定

Ext.get('test').on({
	'click':{
		fn:fn
	},
	'mouseover':{
		fn:fn,
		single:true,
		delay:100
	}
})

Extjs在Asp.Net中的应用开发

-
  • 1970年01月01日 08:00

ExtJS梦想之旅(三)--综合练习(Ext窗口的使用和事件驱动编程)

使用ExtJS完成需求:当页面载入时创建一个Ext窗口,该窗口上有两个按钮,当单击按钮一的时候弹出一个普通窗口,当单击 按钮二的时候弹出一个窗口,该窗口中显示一棵树。该例子是对窗口的使用和Ext事件...
  • JavaChenZhenlin
  • JavaChenZhenlin
  • 2013-07-23 20:54:00
  • 1833

事件驱动框架(三)——pt协程

事件驱动框架(三)——pt协程
  • DFSAE
  • DFSAE
  • 2016-11-03 10:31:50
  • 1218

软件架构模式-事件驱动

没有进行架构设计的应用程序通常是紧耦合的、玻璃心,难以改变。没有头绪。如果不理解应用的各个组件的内部工作方式的话很难看清它的架构特征。关于部署和维护的问题都很难回答:架构的规模如何?程序的性能如何?程...
  • Scythe666
  • Scythe666
  • 2017-03-11 22:22:20
  • 1659

ExtJs学习笔记,共30讲

  • 2011年01月04日 12:17
  • 981KB
  • 下载

extJs 2.1学习笔记

  • 2008年08月28日 15:16
  • 981KB
  • 下载

[ExtJS5学习笔记]第十五节 Extjs5表格显示不友好?panel的frame属性在作怪

将昨天显示的问题给debug了一下,发现官方例子中,将承载着grid的panel容器中frame属性设置为true了。试了下,果真就是这个原因,来看下我的最终成果吧。...
  • sushengmiyan
  • sushengmiyan
  • 2014-09-04 19:32:54
  • 5953

[ExtJS5学习笔记]第四节 欢迎来到extjs5-手把手教你实现你的第一个应用

这篇指引提供了一个简单的ext js介绍,我们会从讨论建立一个简单的hello world例子开始我们的体验。我们会接着讲解在extjs中代码是怎样的结构,这个指导同样也会包括一些其他可以使用的资源的...
  • sushengmiyan
  • sushengmiyan
  • 2014-08-01 10:46:43
  • 27114

ExtJS学习笔记.doc

  • 2011年10月30日 13:19
  • 243KB
  • 下载

[持续更新]JavaScript学习笔记(二)

1.变量作用域 这个是个重点,也是前端考察的要点。 一个变量的作用域(scope):是程序员代码中定义这个变量的区域。 这是JavaScript权威指南第六版中对作用域的定义。简单的来说:一个变量定义...
  • u014267351
  • u014267351
  • 2015-08-12 22:11:55
  • 407
收藏助手
不良信息举报
您举报文章:EXTjs 学习笔记(二)--事件驱动
举报原因:
原因补充:

(最多只允许输入30个字)