好不容易找到了《Ext Js深入浅出》的资料,以后的代码大多摘自此书,算是学习笔记了。
自定义事件
Ext.onReady(function(){
/* 定义一个person对象 */
Person = function(name){
this.name=name; //添加属性
this.addEvents("walk","eat","sleep");//使用addEvents定义事件
}
/* 使用extend让Person继承Observable的所有属性 */
Ext.extend(Person,Ext.util.Observable,{
/*添加info,返回Person信息 */
info:function(event){
return this.name+' is '+event+"ing.";
}
});
/* 添加监听器,on()是addListener()的简写形式,第一个参数传递事件名称
第二个参数是事件发生时执行的函数
*/
var person=new Person('Li');
person.on('walk',function(){
Ext.Msg.alert('event',person.name+"在行走");
});
person.on('eat',function(breakfast,lunch,supper){
Ext.Msg.alert('event',person.name+"吃"+breakfast+","+lunch+"和"+"supper");
});
person.on('sleep',function(time){
Ext.Msg.alert('event',person.name+"从"+time+"开始睡觉");
});
/* 设置按钮触发点击事件 */
var walk=new Ext.Button({
renderTo:Ext.getBody(),
id:'walk',
text:'walk',
height:30,
width:50
});
var eat=new Ext.Button({
renderTo:Ext.getBody(),
id:'eat',
text:'eat',
height:30,
width:50
});
var sleep=new Ext.Button({
renderTo:Ext.getBody(),
id:'sleep',
text:'sleep',
height:30,
width:50
});
/* 调用fireEvent触发点击事件,传入事件名称调用执行监听函数 */
Ext.get('walk').on('click',function(){
person.fireEvent('walk');
});
Ext.get('eat').on('click',function(){
person.fireEvent('eat','早餐','午餐','晚餐');
});
Ext.get('sleep').on('click',function(){
person.fireEvent('sleep',new Date());
});
});