EXTjs 学习笔记（二）--事件驱动

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
	}
})