ExtJS学习-----自定义事件

来源：互联网发布：linux cat 输出到文件编辑：程序博客网时间：2024/05/16 15:38

Ext中遵循一种树状的事件模型，所有继承自Ext.util.observable类的控件都可以支持事件。

以下是自定义事件事例：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="ext-3.2.1/resources/css/ext-all.css" rel="stylesheet" />
    <script src="ext-3.2.1/adapter/ext/ext-base.js"></script>
    <script src="ext-3.2.1/ext-all.js"></script>
    <script>
        Ext.onReady(function () {
            Person = function (name) {
                this.name = name;
                this.addEvents("walk", "eat", "sleep");
            }
            Ext.extend(Person, Ext.util.Observable, {
                info: function (event) {
                    return this.name + "is" + event + "ing.";
                }
            });
            var person = new Person("Lingo");
            person.on("walk", function () {
                Ext.MessageBox.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.format("H")+"点开始睡觉啦");
            });
            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());
            });

        });

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="walk" type="button" value="walk" />
         <input id="eat" type="button" value="eat" />
         <input id="sleep" type="button" value="sleep" />
    </div>
    </form>
</body>
</html>