People里对name和age的改变做出了对应的事件
一个事件要符合三个步骤:定义、发布、订阅
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); /**事件的发布*/
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页面上(实现了事件的订阅)
1 <script type="text/javascript" src="./scripts/ext/demo/People.js"></script>
2
3 <script type="text/javascript">
4 var _people = null;
5
6 //按钮点击触发的事件
7 button_click = function(){
8 _people.setName(prompt("请输入你的名字!", ""));
9 _people.setAge(prompt("请输入你的年龄!",""));
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 /**事件的队列,同一个事件多次订阅*/
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">这是对事件调用的测试页面</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>
但是这个例子我一直没找到错误,使用谷歌浏览器的时候只能出现第一个输入框就什么效果也没有了,要是哪位大虾发现错误请及时告诉我啊~~谢谢喽
~~自己刚发现了错误,我的代码是用MyEclipse生成的,JS文件是使用File新建的,命名的时候忘了写后缀了~~
我可是活生生找了一下午啊~~可是记清楚了~~~!!
事件Event"
trackback:ping="http://www.blogjava.net/wufang5/services/trackbacks/239941.aspx" />
-->