Ext.js3.4版本學習2

好不容易找到了《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());
        }); 
});