EXT--->事件Event
People里對(duì)name和age的改變做出了對(duì)應(yīng)的事件
一個(gè)事件要符合三個(gè)步驟:定義、發(fā)布、訂閱
1 Ext.namespace(Ext.dojochina);
2
3 Ext.dojochina.People = function() {
4 this.addEvents( /**事件的定義*/
5 "namechange",
6 "agechange"
7 );
8 };
9
10
11 Ext.extend(Ext.dojochina.People, Ext.util.Observable, {
12 name:"",
13 age:"",
14
15 setName:function(_name) {
16 if(this.name != _name) {
17 this.fireEvent("namechange", this, this.name, _name); /**事件的發(fā)布*/
18 this.name = _name;
19 }
20 },
21
22 setAge: function(_age) {
23 if(this.age != _age) {
24 this.fireEvent("agechange", this, this.age, _age);
25 this.age = _age;
26 }
27 }
28 });
2
3 Ext.dojochina.People = function() {
4 this.addEvents( /**事件的定義*/
5 "namechange",
6 "agechange"
7 );
8 };
9
10
11 Ext.extend(Ext.dojochina.People, Ext.util.Observable, {
12 name:"",
13 age:"",
14
15 setName:function(_name) {
16 if(this.name != _name) {
17 this.fireEvent("namechange", this, this.name, _name); /**事件的發(fā)布*/
18 this.name = _name;
19 }
20 },
21
22 setAge: function(_age) {
23 if(this.age != _age) {
24 this.fireEvent("agechange", this, this.age, _age);
25 this.age = _age;
26 }
27 }
28 });
JSP頁(yè)面上(實(shí)現(xiàn)了事件的訂閱)
1 <script type="text/javascript" src="./scripts/ext/demo/People.js"></script>
2
3 <script type="text/javascript">
4 var _people = null;
5
6 //按鈕點(diǎn)擊觸發(fā)的事件
7 button_click = function(){
8 _people.setName(prompt("請(qǐng)輸入你的名字!", ""));
9 _people.setAge(prompt("請(qǐng)輸入你的年齡!",""));
10 }
11
12 Ext.onReady(function(){
13 var txt_name = Ext.get("txt_name");
14 var txt_age = Ext.get("txt_age");
15
16 _people = new Ext.dojochina.People();
17 /**事件的訂閱*/
18 _people.on("namechange", function(_people, _old, _new){
19 txt_name.dom.value = _new;
20 });
21
22 _people.on("agechange", function(_people, _old, _new){
23 txt_age.dom.value = _new;
24 });
25
26 /**事件的隊(duì)列,同一個(gè)事件多次訂閱*/
27 _people.on("namechange", function(_people, _old, _new){
28 document.title = _new;
29 });
30 });
31
32 </script>
33
34 </head>
35
36 <body>
37 <h4><font color="blue">這是對(duì)事件調(diào)用的測(cè)試頁(yè)面</font></h4>
38 姓名:<input type="text" id="txt_name"> <br />
39 年齡:<input type="text" id="txt_age">
40 <input type="button" value="輸入" onclick="button_click()">
41
42 </body>
2
3 <script type="text/javascript">
4 var _people = null;
5
6 //按鈕點(diǎn)擊觸發(fā)的事件
7 button_click = function(){
8 _people.setName(prompt("請(qǐng)輸入你的名字!", ""));
9 _people.setAge(prompt("請(qǐng)輸入你的年齡!",""));
10 }
11
12 Ext.onReady(function(){
13 var txt_name = Ext.get("txt_name");
14 var txt_age = Ext.get("txt_age");
15
16 _people = new Ext.dojochina.People();
17 /**事件的訂閱*/
18 _people.on("namechange", function(_people, _old, _new){
19 txt_name.dom.value = _new;
20 });
21
22 _people.on("agechange", function(_people, _old, _new){
23 txt_age.dom.value = _new;
24 });
25
26 /**事件的隊(duì)列,同一個(gè)事件多次訂閱*/
27 _people.on("namechange", function(_people, _old, _new){
28 document.title = _new;
29 });
30 });
31
32 </script>
33
34 </head>
35
36 <body>
37 <h4><font color="blue">這是對(duì)事件調(diào)用的測(cè)試頁(yè)面</font></h4>
38 姓名:<input type="text" id="txt_name"> <br />
39 年齡:<input type="text" id="txt_age">
40 <input type="button" value="輸入" onclick="button_click()">
41
42 </body>
但是這個(gè)例子我一直沒(méi)找到錯(cuò)誤,使用谷歌瀏覽器的時(shí)候只能出現(xiàn)第一個(gè)輸入框就什么效果也沒(méi)有了,要是哪位大蝦發(fā)現(xiàn)錯(cuò)誤請(qǐng)及時(shí)告訴我啊~~謝謝嘍
~~自己剛發(fā)現(xiàn)了錯(cuò)誤,我的代碼是用MyEclipse生成的,JS文件是使用File新建的,命名的時(shí)候忘了寫(xiě)后綴了~~
我可是活生生找了一下午啊~~可是記清楚了~~~!!


posted on 2008-11-11 19:58 懶蟲(chóng) 閱讀(204) 評(píng)論(0) 編輯 收藏 所屬分類: EXT