EXT学习笔记第一课

1.EXT的事件和类
分为，自定义事件和浏览器事件。
所有继承自Ext.Util.Observable类的的控件都支持事件。
2.EXT类定义例子
//Person类
Person = function(name){
this.name=name;//属性
this.addEvents("walk","eat","sleep");//定义了三个事件
}
//让Person类继承于基类
Ext.extend(Person, Ext.Util.Observable,{
info: function(event){//加上个函数，返回值
return this.name + 'is' + event + 'ing.';
}
});
//调用
var person = new Person('Tony');
//on是addListener的缩写，un是removelistener的缩写
person.on('eat',function(freakfast,lunch,supper){//添加eat的事件，第一个是事件的名称，第二个是事件执行的函数。
Ext.Msg.alert(person.name+'XXXX');
});
Ext.get('eat').on('click',function(){//声明一个eat的按钮，加的事件
person.fireEvent('eat','早','中','午');//记住方法的调用和参数的传递
});
3.浏览器事件例子
//Ext使用Ext.EventManager/Ext.EventObject/Ext.lib.Event对原生的浏览器事件进行了封装。
var e=document.getElementById("test");
e.onclick=function(){};
e.onclick=function(){};//上面那个不执行，浏览器只能单一绑定
Ext.onReady(function(){
var test=Ext.get('test');
//以下两个都能执行，可绑定多个监听事件
test.on('click',function(){
alert("");
});
test.on('click',function(){
alert("");
});
});
4.Ext.Util.Observable的一些高级功能
Ext.get('test').on('click',fn,this,{//事件名称，激发函数，作用域，复合参数
single:true,//只执行一次，过后不再执行
delay:100,//事件激发后延误100ms执行
testId:4
});
Ext.get('test').on('click',fn,this,{//事件名称，激发函数，作用域，复合参数
buffer:100,//事件激发后延误100ms执行,和上面不同的时，buffer会创建一个Ext.util.DelayTask对象，并放fn放入其中等待执行，如果再次激发了事件，上次的任务就会被取消，并把新的fn放入等执行，避免重复执行。
testId:4
});
5.Ext设置多个事件
Ext.get('test').on({
'click':{
fn:fn
},
'mouseover':{
fn:fn,
single:true,
delay:100
}
})
6.Ext使用capture函数拦截事件的触发
Ext.get('capture1').on('click',function(){
Ext.util.Observable.capture(person,function(){//person为上面例子定义的对象
alert("");//拦截person的fireEvent()函数，在触发任一事件时被拦截到，弹出框。
return ture;//返回ture时，不会中止事件的发生；返回false时，事件被终止
});//还可以为事件设置多个拦截函数，只要不返回false就可以继续执行，返回false，即中止
});//relseaseCapture可以清除事件的所有拦截函数，是capture的反向操作
7.suspendEvents()暂停某一事件；resumeEvents()继续事件。
8.Ext.EventManager的几个函数
onDocumentReady,即Ext.onReady(),会在页面文档渲染完毕但图片还未下载时启用函数
Ext.EventManger.onWindowResize(function(width,height){//onWindowResize只有两个参数，分别代表当前窗口的宽和高，自动加载的。
alert(width+height);
});
Ext.onReady(function(){//需要包含在onReady里
Ext.EventManager.onTextResize(function(oldSize,newSize){//当浏览器字体大小改变时激发
alert(oldSize+newSize);
});
});
9.Ext.EventObject
Ext.get('text').on('keyPress',function(e){
if(e.charCode==Ext.EventObject.SPACE){//定义按键名称
alert("空格");
}
});
Ext.get(document.body).on('mousewheel',function(e){
var delta = e.getWheelDelta();//获取招标滚动的delta值
var test = Ext.get('test');
var width = test.getWidth();
test.setWidth(width+delta*500,true);//根据鼠标滚动的值设计宽度
});