Extjs的事件機制
1． 事件的三種綁定方式
HTML/DHTML
DOM
EXTJS
事件綁定機制的總結地址：
http://www.uspcat.com/forum.php?mod=viewthread&tid=203&extra=page%3D1
第一種 在HTML中的原始的js腳本
<script type="text/javascript">
function hello(){
alert("第一種事件綁定機制");
}
</script>
<input type="button" id="btn1" value="第一種事件綁定機制" οnclick="hello()"/><br/>
第二種：在DOM下的事件機制
<input type="button" id="btn2" value="第二種事件綁定機制"/><br/>
(function(){
Ext.onReady(function(){
//DOM事件的兩種機制
if(Ext.isIE){
//適合在IE下運行的機制
document.getElementById("btn2").attachEvent("onclick",function(){
alert("第二種");
});
}else{
//適合於火狐瀏覽器下運行的
document.getElementById("btn2").addEventListener("click",function(){
alert("第二種");
});
}
});
})();
注：在IE瀏覽器下運行的是attachEvent，在火狐瀏覽器下運行的是addEventListener，DOM不能跨瀏覽器運行
第三種 在extjs下的事件機制
(function(){
Ext.onReady(function(){
//extjs的事件機制，是跨瀏覽器的
Ext.get("btn3").on("click",function(){
alert("333");
});
});
})();
Extjs的事件機制在哪個瀏覽器下都可以使用
2． Ext.util.Observable 事件的基類
它是爲所有支持事件機制的extjs組件提供事件的支持
如果我們自己創建新的組件要是有事件的支持，那麼我們就繼承它
事件的分類：
標準事件[鍵盤按鈕按下，鼠標的單擊事件，滑過滑動]
業務事件[當面板收起的時候觸發的事件，當組件被銷燬的時候觸發，當每一個對象的屬性值不爲空的時候觸發]
一個自定義的例子：
沒有用到事件處理的場景
母親問孩子餓不餓—--->
---à孩子
餓了 ---à給一瓶牛奶
不餓---à不給
用了事件的場景
母親給孩子一瓶牛奶----à
孩子拿到牛奶感覺餓了就喝
感覺不餓就不喝
角色功能分析
孩子：應該有自己能拿到牛奶判斷自己餓不餓的方法，當母親給他牛奶的時候調用這個方法
那麼孩子就要有一個業務事件時刻監聽着母親什麼時候給奶喝
母親：調用孩子拿牛奶的方法，並且傳入一瓶牛奶
例子爲：
(function(){
Ext.onReady(function(){
//舉例講解時間的基類 Ext.util.Obervable
//孩子類
Ext.define("children",{
extend:'Ext.util.Observable',
//構造函數
constructor:function(){
this.state = "hungry",//目前所屬的狀態
this.setMilk = function(milk){
//觸發這個事件的動作
this.fireEvent('hungry',milk);
},
this.addEvents({"hungry":true});//添加事件
this.addListener("hungry",function(milk){
if(this.state == 'hungry'){
this.drink(milk);
}else{
alert("我不渴");
}
});
this.drink = function(milk){
alert("我喝了一瓶牛奶"+milk);
}
},
});
var children = Ext.create("children",{});
//母親調用孩子的接受牛奶的方法
children.setMilk("爽歪歪");
});
/**
* 事件的步驟：
* (1)爲對象添加一個事件 this.addEvents
* (2)事件的監聽方式註冊這個事件 this.addListener
* (3)觸發了這個事件的動作 this.fireEvent
*/
})();
3． addManageListener 受管制的事件監聽
它是由調用的組件創建管理的，當組件執行了銷燬的命令的時候所有的被管制的組件都被銷燬
(function(){
Ext.onReady(function(){
//來介紹事件中addManageListener的作用，是用來管理其他組件的
//我們用到一個工具類來舉例
var tbar = Ext.create("Ext.toolbar.Toolbar",{
renderTo : Ext.getBody(),//意思是讓組件依附於哪裏
width:500,
//存放組件的數組
items:[
{xtype: 'button',id:'create', text : 'create' },
{xtype:'button',id:'delete', text:'delete'},
{xtype:'button',text:'destory',handler:function(){
var c = Ext.getCmp("delete");//
if(c){
c.destroy();
}
}
}
]
});
var deleteB = Ext.getCmp("delete");
deleteB.addManagedListener(Ext.getCmp("create"),'click',function(){
alert("添加操作");
});
//deleteB.addManagedListener的意思是( 管理的是誰，管理的事件是什麼事件，當執行管理的事件時的操作)，就相當於是
//Ext.getcmp("create").on("click",function(){});
//Ext.getCmp("delete");方法獲取的是id
});
})();
4.relayEvents事件的分發和傳播（控制實現事件在不同空間或對象內傳播）
var children = Ext.create("children",{});
//父類沒有聲明過任何監聽事件
Ext.define("father",{
extend:'Ext.util.Observable',
constructor:function(config){
this.listeners = config.listeners;
this.superchlass.constructor.call(this,config);
}
});
var father = Ext.create("father",{});
father.relayEvents(children,['hungry']);//事件的分發和傳播
father.on('hungry',function(){
alert("送醫院")
});
5．事件對象 Ext.EventObject
Ext.onReady(function(){
//eventObject傳統的事件
var b = Ext.get("btn4").on("click",function(e){
alert(e.getPageX());
});
});
6.事件管理器 Ext.EventManager
它可以更方便的爲頁面元素綁定事件處理函數
Ext.onReady(function(){
//通過事件管理器註冊監聽
Ext.EventManager.addListener("btn5",'click',function(){
alert("adfsf");
})
});