]]>
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>按鈕的測試</title>
<link rel="stylesheet" type="text/css" href="./scripts/ext/resources/css/ext-all.css">
<script type="text/javascript" src="./scripts/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./scripts/ext/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var _btn = new Ext.Button({
renderTo:Ext.getBody(), /**這里的Ext.getBody() = document.body*/
text:"確定" ,
//------------1)-----------handler------------------------------------------------
/**
* handler只能對click做出響應
handler:function(){
alert("Hello EXTJS");
}
*/
//----------------2)-------------listeners------------------------------------------
/**
*listeners可以對所有的事件做監聽
listeners :{
"click":function(){
alert("Hello EXTJS!");
}
}
*/
});
//----------------3)-------------ON---------這個方法在onReady()外面---------------------------------
_btn.on("click", function(){
alert("Hello EXTJS!!");
});
});
</script>
</head>
<body>
按鈕的測試頁面(點擊事件的三個寫法)
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>按鈕的測試</title>
<link rel="stylesheet" type="text/css" href="./scripts/ext/resources/css/ext-all.css">
<script type="text/javascript" src="./scripts/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./scripts/ext/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var _btn = new Ext.Button({
renderTo:Ext.getBody(), /**這里的Ext.getBody() = document.body*/
text:"確定" ,
//------------1)-----------handler------------------------------------------------
/**
* handler只能對click做出響應
handler:function(){
alert("Hello EXTJS");
}
*/
//----------------2)-------------listeners------------------------------------------
/**
*listeners可以對所有的事件做監聽
listeners :{
"click":function(){
alert("Hello EXTJS!");
}
}
*/
});
//----------------3)-------------ON---------這個方法在onReady()外面---------------------------------
_btn.on("click", function(){
alert("Hello EXTJS!!");
});
});
</script>
</head>
<body>
按鈕的測試頁面(點擊事件的三個寫法)
</body>
</html>
renderTo:是把這個對象放到指定的對象中，這里產生的也是HTML代碼
這里沒有添加任何的JS文件，比較簡單
]]>
一個事件要符合三個步驟：定義、發布、訂閱
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 });
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>
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新建的，命名的時候忘了寫后綴了~~
我可是活生生找了一下午啊~~可是記清楚了~~~??！
~~自己剛發現了錯誤，我的代碼是用MyEclipse生成的，JS文件是使用File新建的，命名的時候忘了寫后綴了~~我可是活生生找了一下午啊~~可是記清楚了~~~??！]]>
]]>
1 Ext.namespace("Ext.dojochina");
2 //EXT的構造方法
3 Ext.dojochina.Person = function(_cfg) {
4 Ext.apply(this, _cfg);
5 };
6
7 //實例方法
8 Ext.apply(Ext.dojochina.Person.prototype, {
9 job:"無",
10 print:function(){
11 alert(String.format("姓名:{0}, 性別:{1},角色:{2}", this.name, this.sex, this.job));
12 }
13 });
2 //EXT的構造方法
3 Ext.dojochina.Person = function(_cfg) {
4 Ext.apply(this, _cfg);
5 };
6
7 //實例方法
8 Ext.apply(Ext.dojochina.Person.prototype, {
9 job:"無",
10 print:function(){
11 alert(String.format("姓名:{0}, 性別:{1},角色:{2}", this.name, this.sex, this.job));
12 }
13 });
Student類是繼承自Person類的，只是job=Student
1 Ext.namespace("Ext.dojochina");
2 //構造函數
3 Ext.dojochina.Student = function(_cfg) {
4 Ext.apply(this, _cfg);
5 };
6 //繼承的寫法
7 Ext.extend(Ext.dojochina.Student,Ext.dojochina.Person,{
8 job:"學生"
9 });
2 //構造函數
3 Ext.dojochina.Student = function(_cfg) {
4 Ext.apply(this, _cfg);
5 };
6 //繼承的寫法
7 Ext.extend(Ext.dojochina.Student,Ext.dojochina.Person,{
8 job:"學生"
9 });
JSP頁面上的顯示：
1 <%@ page language="java" pageEncoding="utf-8" contentType="text/html; charset=utf-8"%>
2
3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
4 <html>
5 <head>
6
7 <title>Student類Teacher類 繼承自Person類</title>
8
9 <link rel="stylesheet" type="text/css" href="./scripts/ext/resources/css/ext-all.css">
10 <script type="text/javascript" src="./scripts/ext/adapter/ext/ext-base.js"></script>
11 <script type="text/javascript" src="./scripts/ext/ext-all.js"></script>
12 <!--注意上面兩個JS文件的導入順序 -->
2
3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
4 <html>
5 <head>
6
7 <title>Student類Teacher類 繼承自Person類</title>
8
9 <link rel="stylesheet" type="text/css" href="./scripts/ext/resources/css/ext-all.css">
10 <script type="text/javascript" src="./scripts/ext/adapter/ext/ext-base.js"></script>
11 <script type="text/javascript" src="./scripts/ext/ext-all.js"></script>
12 <!--注意上面兩個JS文件的導入順序 -->
13 <script type="text/javascript" src="./scripts/ext/demo/Person.js"></script>
14 <script type="text/javascript" src="./scripts/ext/demo/Student.js"></script>
15 <script type="text/javascript" src="./scripts/ext/demo/Teacher.js"></script>
16
17 <script type="text/javascript">
18 var _teacher = new Ext.dojochina.Teacher({name:"老楊",sex:"Man"});
19 _teacher.print();
20 var _student = new Ext.dojochina.Student({name:"Lily", sex:"Woman"});
21 _student.print();
22 </script>
23
24 </head>
25
26 <body>
27 測試類的繼承 <br>
28 ---] Student類Teacher類 繼承于Person類
29 </body>
30 </html>
31
32
]]>