ExtJs学习笔记03

来源：互联网发布：matlab求矩阵特征向量编辑：程序博客网时间：2024/04/24 12:52

Ext中的事件机制

     事件：对于外界影响的反应，在ExtJs还支持事件队列模式，有Ext.util.Observable类支持。

event.js

     //命名空间
Ext.namespace("dojochina");
//定义NameSpace的别名
Wy = dojochina;
//定义类
Wy.Person = function(){
    //定义事件(绑定事件)这样 Person 对象就具有了两个空的Event对象（绑定可以执行操作的Event对象使用 addlistener 方法）。
    this.addEvents("nameChange","sexChange");
};
//
Ext.extend(Wy.Person,Ext.util.Observable,{
    name:"",
    sex:"",
    setName:function(name){
        //发布事件
        if(this.name != name){
            this.fireEvent("nameChange",this,this.name,name);
            this.name = name;
            //此处代码顺序决定了各属性的值，fireEvent中的对象及以后的参数均为抛出型参数或者叫参照型
        }
    },
    setSex:function(sex){
        if(this.sex != sex){
            //发布事件
            this.fireEvent("sexChange",this,this.sex,sex);
            this.sex = sex;
        }
    }

});

看JS文件中的定义

先定义了一个Person类，在类中只有一个属性addEvents，属性值是一个字符串数组，在这里是定义了两个 Event 事件的名字。
声明 Person 类继承自 Ext.util.Observable 类，并且定义了Person类的另外一些属性：name，sex，以及它们的写方法（这里把setName和setSex称为属性更合适一些）。
在属性的写方法 setName ，setSex 中，如果传入的值和实例化的 Person 对象的属性值不一致就会调用相应的事件，并且给属性赋值。
这样 Person 类的属性定义就完成了，并且现在 Person 是具有Ext事件机制的类，以后在 Person 类的实例中绑定和调用事件就非常方便了。
addEvents()：绑定事件。

      该方法实际上就是在 Person 对象上绑定了两个没有任何实现的事件名，这样 Person 对象就具有了两个空的Event对象（绑定可以执行操作的Event对象使用 addlistener 方法）。

fireEvent()：发布事件，也就是触发绑定的事件

现在Person类的结构就很清楚了，

name属性
sex属性
setName属性（如果传入参数和name属性不一致，调用 “nameChange” 事件）
setSex属性（如果传入参数和name属性不一致，调用 “sexChange” 事件）
在event.js中完成是事件的定义和发布，那事件是在什么时候被订阅的呢？事件触发之后又要进行哪些操作呢？

来看怎么在HTML中怎么订阅事件：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ExtJs之事件</title>

<script type="text/javascript" src="Extjs/ext-base.js"></script>
<script type="text/javascript" src="Extjs/ext-all.js"></script>
<link rel="stylesheet" href="Extjs/ext-all.css">
<script type="text/javascript" src="Extjs/Event.js"></script>
</head>

<script type="text/javascript">
    var person = null;

    button_click = function(){
        person.setName(prompt("请输入姓名", ""));
        person.setSex(prompt("请输入性别", ""));
        };
    Ext.onReady(function(){
           var text_name = Ext.get("text_name");
           var text_sex = Ext.get("text_sex");
           //构建Person类
           person = new Wy.Person();

           //订阅事件
           person.on("nameChange",function(person,old,_new){
                   text_name.dom.value = _new;
               });
           //订阅事件
           person.on("sexChange",function(person,old,_new){
                   text_sex.dom.value = _new;
               });
          //订阅事件
           person.on("nameChange",function(person,old,_new){
                  document.title = _new;
               });

        });

</script>
<body>
<center>
<input type="button" value="输入" onclick="button_click()" />

姓名：<input type="text" id="text_name" maxlength="10" />

性别：<input type="text" id="text_sex" maxlength="10" />

</center>
</body>
</html>

HTML文件页面中定义了两个输入框，和一个按钮，通过Ext.onReady()，页面初始化后首先执行里面的代码

Ext.get()取得文本框中的值
构造 Person 类实例
订阅事件，这个时候定义 Person 中的设值属性的操作具体执行的内容，给setName()和setSex()订阅的事件中添加内容，这一点非常灵活，我们一开始只要先定义一个事件，而这个事件只有一个名字，没有具体实现，我们在订阅这个事件的时候才告诉它如果事件发生我们需要进行什么样的操作。
在点击按钮的时候，调用 button_click 方法来给 person 实例属性赋值。

说明：

     1、 Ext.onReady()：用法相当于 window.onload ，是在页面装载完成时调用的方法，Ext.onReady是一个简写，定义在Ext.core.EventManager中。

     2、Ext.get()方法，它用来取得页面中的一个DOM对象。

     3、text_name.dom.value，用来给DOM对象赋值，相当于document.getElementByIdx_x("txt_name").value

在这个例子中，我们订阅了两次 nameChange 事件，这也是Ext中很重要的一个机制 -- 事件列表，在整个应用当中，公布一个事件，这个事件可以被多次订阅，这一点是很常用的，实现了一个完善的应用体系。

在订阅事件的时候，用到的是 Observable.on 方法，实际上它是 Observable.addListener 的缩写（Ext里面的缩写好多啊...），源代码中是这样定义的：

Ext.util.Observable.prototype.on = Ext.util.Observable.prototype.addListener;