[ExtJS2.1教程-3]事件机制

llying

浏览: 1635416 次
性别:
来自: 长春

最近访客更多访客>>

lcrxiaomei

kristy_yy

ldb621

huangdj

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

EXT prototype HTML JavaScript 浏览器

javascript的事件我们用的最多的就是用于表单验证
现在我们来看一下一个button按钮事件的写法
最简单的直接写入标签中

<input type="button" name="abc" id="abc" value="abc" onclick="alert('abc');"/>
    <br/>
    <a href="http://www.g.cn">谷歌</a>

常用的事件绑定写法

<script>
window.onload = function(){
		var el = document.getElementById("abc");
		el.onclick = function(){
			alert("abc");
		}
	}
</script>
<input type="button" name="abc" id="abc" value="abc"/>
    <br/>
    <a href="http://www.g.cn">谷歌</a>

我们也可以将事件方法单提出来，这种写法更有利于方法的重用

<script>
window.onload = function(){
		fc = function(){
			alert("abc")
		};
		var el = document.getElementById("abc");
		el.onclick = fc;
		el.onmouseover = fc;
	}
</script>
<input type="button" name="abc" id="abc" value="abc"/>
    <br/>
    <a href="http://www.g.cn">谷歌</a>

下面我们来看看ext强大的事件机制
Ext.util.Observable ：支持事件相应的组件或元素都继承于该类。只有继承该类的子类才会拥有事件响应功能。
下面我们来用Ext实现一下类的继承

//定义一个父类
BaseClass = function(){
	
}
//定义父类的属性及方法
BaseClass.prototype.name = "";
BaseClass.prototype.say = function(){
	alert("hello" + this.name);
}
//定义一个子类
SubClass = function(){
	//在子类中定义一个方法,使用this指定作用域，不能省略
	this.hello = function(){
		alert("hello subclass");
	};
}
//使用Ext进行继承，可以接受三个参数（子类，父类，重载的方法（配置选项的数组））
Ext.extend(SubClass,BaseClass);

//新建一个子类
var sub = new SubClass();

sub.hello();
//子类已经拥有了父类的方法了
sub.say();

extend第三个参数的具体用法如下


Ext.extend(SubClass,BaseClass,{
        //子类重新定义了父类方法
	say:function(){
		alert("hello say");
	},
        //子类扩展的一个方法
	walk:function(){
		alert("i walking");
	}
	
});

//新建一个子类
var sub = new SubClass();

sub.hello();
//子类已经拥有了父类的方法了
sub.say();

sub.walk();

有一个问题如果父类中定义了一个方法

BaseClass = function(){
	this.jump = function(){
		alert("jump");
	}
}

BaseClass.prototype.name = "";
BaseClass.prototype.say = function(){
	alert("hello" + this.name);
}

SubClass = function(){
	this.hello = function(){
		alert("hello subclass");
	};
}
//使用Ext进行继承，可以接受三个参数（子类，父类，重载的方法（配置选项的数组））
Ext.extend(SubClass,BaseClass,{
	say:function(){
		alert("hello say");
	},
	walk:function(){
		alert("i walking");
	}
	
});

//新建一个子类
var sub = new SubClass();

sub.hello();
//子类已经拥有了父类的方法了
sub.say();

sub.walk();

//该方法并不会被调用
sub.jump();

这个是与js的对象创建有关
由于我是采用new SubClass();但是子类并没有实际对父类进行初始化，所以我们应该强制调用父类的构造函数进行父类的初始化创建

//定义一个父类
BaseClass = function(){
	this.jump = function(){
		alert("jump");
	}
}
//定义父类的属性及方法
BaseClass.prototype.name = "";
BaseClass.prototype.say = function(){
	alert("hello" + this.name);
}
//定义一个子类
SubClass = function(){
	//强制调用父类的构造方法,对父类初始化
	SubClass.superclass.constructor.call(this);
	//在子类中定义一个方法,使用this指定作用域，不能省略
	this.hello = function(){
		alert("hello subclass");
	};
}
//使用Ext进行继承，可以接受三个参数（子类，父类，重载的方法（配置选项的数组））
Ext.extend(SubClass,BaseClass,{
	say:function(){
		alert("hello say");
	},
	walk:function(){
		alert("i walking");
	}
	
});

//新建一个子类
var sub = new SubClass();

sub.hello();
//子类已经拥有了父类的方法了
sub.say();

sub.walk();
sub.jump();

这样我们才算完成了一个完整的继承

我们已经了解了继承，下面我们定义一个对象来继承Ext.util.Observable，定义事件

Employee = function(){
	//定义一个事件名
	this.addEvents("eve");
}

Ext.extend(Employee,Ext.util.Observable);
//定义一个事件操作
todo = function(){
	alert("我要去做一件事");
}
var em = new Employee();
//将事件名称与事件操作绑定
em.on("eve",todo);
//通过名称触发具体事件行为
em.fireEvent("eve");

要实现事件的响应功能这个类必须继承Observable

下面我们来对一个html页面元素进行事件的绑定操作

<html>
  <head>
    <title>index.html</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
     
    <link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css">
    <script type="text/javascript" src="./ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="./ext/ext-all.js"></script>
	<script type="text/javascript">
Ext.onReady(function() {
	//通过Ext.get("id")获得页面元素,不过这里返回的是ExtElement的对象
	var el = Ext.get("abc");
	//该属性返回undefine因为ExtElement不存在该属性
	//alert(el.value);
	//var htmlel = Ext.getDom("div");
	//alert(htmlel.innerHTML);
	/**
	 * document.getElementById("id")返回的是html的Element
	 * 也可以通过Ext.getDom("id")方式获得
	 * 需要注意ExtElement对象和HtmlElement对象的区别
	 * 比如.innerHTML属性在ExtElement中就不存在
	 */
	//之前我们用on进行事件的绑定，实际上on是addListener的缩写
	el.addListener("click",hello)
	/**
	 * 由于el是html元素所以自身就有click事件，而且可以自身接受触发
	 * 触发的时候就会调用hello方法
	 * 实际就是设置一个监听，在el元素的click事件上
	 */
});

hello = function(){
	alert("hello");
}
</script>
	
  </head>
  
  <body>
    <input type="button" name="abc" id="abc" value="abc" />
    <br/>
    <a href="http://www.g.cn">谷歌</a>
    <br/>
    <div id="div">abc</div>
  </body>
</html>

也可以用Ext.EventManager进行事件的绑定

Ext.onReady(function() {
	//通过Ext.get("id")获得页面元素,不过这里返回的是ExtElement的对象
	var el = Ext.get("abc");
	
	//我们也可以通过Ext.EventManager来设置监听器
	Ext.EventManager.addListener(el,"click",hello);
	Ext.EventManager.addListener(el,"mouseover",hello2);
	
});

hello = function(){
	alert("hello");
};

hello2 = function(){
	alert("hello2");
}

注意如果绑定两个事件，注意先后顺序，这里先触发hello2然后触发hello

el.addListener("click",hello)
	el.addListener("click",hello2)

我们让稍微改变一下hello方法

Ext.onReady(function() {
	//通过Ext.get("id")获得页面元素,不过这里返回的是ExtElement的对象
	var el = Ext.get("abc");
	el.addListener("click",hello)
});

hello = function(){
	//alert("hello");
	alert(this.id);
};

这里弹出了el的id的值"abc"
如果我们将el.addListener("click",hello)中添加一个参数变成
el.addListener("click",hello,this)
很奇怪 alert出的竟是ext-gen1，这是为什么呢？
主要是addListener中有四个参数，前两个参数已经很明白了
第三个参数是scope（作用域），在不加参数的时候hello方法中的this表示的是真正作用于事件中的对象，el.addListener("click",hello,this)中的this表示的是这个方法所在的对象即匿名类（将这个对象传进后）
function() {
//通过Ext.get("id")获得页面元素,不过这里返回的是ExtElement的对象
var el = Ext.get("abc");
el.addListener("click",hello,this)
}
该对象是Ext创建的所以Ext会自动为改对象创建一个id，因为将这个对象传进去了所以hello方法中的this就变成该匿名类的对象了，其id属性自然也跟着转变了。

下面清楚的显示出作用域的含义

Ext.onReady(function(){	
	function AA(){
		this.first = "hello";
		var el = Ext.get("abc");
                //这里this是AA的实力
		el.on("click",onClick,this);
	}
	//实例化
	new AA();
});
onClick = function(){
	alert(this.first);
}

这里将弹出hello，如果el.on("click",onClick,this);去掉this那么onClick事件中的this就是el自身，实际上onClick中的this表示的就是scope传过来的对象指针，如果不传则代表自身

Observable中的listener
下面我们来看一下第四个参数包括
scope :作用域

delay :响应函数的延迟时间（毫秒）

single :是否只执行一次

buffer :函数的延迟（在延迟之中不会再次响应）

需要注意delay和buffer不能同时应用，还有就是scope同第三各参数冲突

Ext.onReady(function(){
	function AA(){
		this.first = "hello";
		var el = Ext.get("abc");
		el.on("click",onClick,this,{
			delay:1000,
			single:true,
			//buffer:1000
		});
	}
	//实例化
	new AA();
});
onClick = function(){
	alert(this.first);
}

多个事件可以依次绑定，不过也可以在同一个on方法下绑定

Ext.onReady(function(){
	function AA(){
		this.first = "hello";
		var el = Ext.get("abc");

		el.on({
			click:onClick,
			mouseover:onClick,
                        scope:this
		})
	}
	//实例化
	new AA();
});
onClick = function(){
	alert(this.first);
}

还可以在on方法下这样绑定

el.on({
			click:{
				delay:1000,
				fn:onClick,
				scope:this
			},
			mouseover:{
				delay:1000,
				fn:onClick
			}
		})

Ext.EventObject :浏览器标准事件类

我们将a标签上添加一个点击事件
<a href="http://www.g.cn" id="g">谷歌</a>

Ext.onReady(function(){
	var el = Ext.get("g");
	el.on("click",onClick);
});

onClick = function(){
	alert(this.id);
}

我们发现他是先alert出我们定义的事件然后又完成了跳转
现在我们不希望他进行跳转怎么做呢？

首先实际在方法调用的时候是隐士的传递过去了一个EventObject

onClick = function(e){
	var htmlel = e.getTarget();//返回事件发生的htmlElement
	alert(htmlel.innerText);
}

我们已近看到了他确实可以获取eventObject
他有一个阻止事件继续发生的方法stopEvent
我们可以通过该方法阻止他的后续事件发生

onClick = function(e){
	var htmlel = e.getTarget();
	alert(htmlel.innerText);
        e.stopEvent();
}

这样就不会继续进行页面跳转了。

下面我们见一下例子 window事件使用的例子

Ext.onReady(function(){
	var win = new Ext.Window({
		title:'hello',
		html:"hello world!",
		width:300,
		height:300
	})
	win.show();
	win.on("move",moving);//move方法会自动传递过去三个参数，具体见window文档
});		
moving = function(c,x,y){
	alert(c.id+" "+x+" "+y);
}

分享到：

Ext2.1API中文文档 | [ExtJS2.1教程-2]组件的使用

2009-01-02 23:26
浏览 3472
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论