Ext自定义类并添加事件处理

// 实现一个名称为Person的类。有一个Name属性。实例化时添加walk,eat,sleep3个事件。

    Person = function(name) {

        this.name = name;

        this.addEvents("walk","eat","sleep");

    }

 

继承Ext.util.Observable的类的控件都可以支持事件，因此让Person类继承Observable。

// 使用Ext.extend让Person继承Ext.util.Observable，并增加了info方法，让它返回Person的信息。

    Ext.extend(Person,Ext.util.Observable,{

        info:function(event) {

            returnthis.name +" is " + event + "ing.";

        }

    });

 

处理walk,eat,sleep事件

var p =new Person("Mark");

    //这里的on是addEvent的简写形式，功能一样。第一个参数是事件名称，第二个参数是事件发生时调用的方法。

    p.on("walk",function() {

        Ext.MessageBox.alert("event",p.name +" 在散步。");

    });

   

    p.on("eat",function(breakfast,lunch,supper) {

        Ext.MessageBox.alert("event",p.name+"要吃" + breakfast+","+lunch+","+supper);

    });

   

    p.on("sleep",function(time) {

        Ext.MessageBox.alert("event",p.name+"从晚上" + time + "开始休息。");

    });

测试：

HTML部分：

<inputtype="button"value="walk"id="walk"/>

<inputtype="button"value="eat"id="eat"/>

<inputtype="button"value="sleep"id="sleep"/>

 

Js部分：

Ext.get("walk").on("click",function() {

        p.fireEvent("walk");

    });

   

Ext.get("eat").on("click",function() {

        p.fireEvent("eat","早餐","中餐","晚餐");

    });

   

Ext.get("sleep").on("click",function(){

        p.fireEvent("sleep",10);

    });

3个按钮，每个按钮触发一个事件。