EXTJS面向對象設計

記得要將代碼放到ext-2.3.0（我用的是這個）中，才能運行哦，還有注意js和css的路徑問題！！

1、支持命名空間（文件夾namespace中）

HelloWorld.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 命名空間 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"/>
<script src="../adapter/ext/ext-base.js"></script>
<script src="../ext-all.js"></script>
<script src="HelloWorld.js"></script>
<script>
    new Ext.test.HelloWorld(); // 創建一個類的實例
</script>
</HEAD>
<BODY>

</BODY>
</HTML>

HelloWorld.js

Ext.namespace("Ext.test");// 定義一個命名空間

Ext.test.HelloWorld = Ext.emptyFn;// 在命名空間上定義一個類HelloWorld

//Ext.test.HelloWorld = function(){};

2、支持類實例屬性（文件夾property中）

Person.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 類實例屬性 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"/>
<script src="../adapter/ext/ext-base.js"></script>
<script src="../ext-all.js"></script>
<script src="Person.js"></script>
<script>
     var _person = new Ext.test.Person();
	 alert(_person.name);

	 _person.name="chen";// 修改name屬性
	 alert(_person.name);
</script>
</HEAD>
<BODY>

</BODY>
</HTML>

Person.js

Ext.namespace("Ext.test");
Ext.test.Person = Ext.emptyFn;

//apply方法用來把後面對象的參數拷貝到第一個對象中
Ext.apply(Ext.test.Person.prototype,{
			name:"lian"
	});

以下只寫javascript腳本，具體如上！

3、支持類實例方法(文件夾instanceMethod中)

Person.html

<script src="Person.js"></script>
<script>
     var _person = new Ext.test.Person();
	 _person.name="lian";
	 _person.sex="男";
	 _person.print();

	 _person.name="chen";
	 _person.sex="女";
	 _person.print();
</script>

Person.js

Ext.namespace("Ext.test");
Ext.test.Person = Ext.emptyFn;

// 類實例方法
Ext.apply(Ext.test.Person.prototype,{
			name:"",
			sex:"",
			print:function(){
				alert(String.format("姓名:{0},性別:{1}",this.name,this.sex));
			}
	});

4、支持類靜態方法 (文件夾staticMethod中)

Person.html

<script src="Person.js"></script>
<script>
	Ext.test.Person.print("lian","男");//調用類靜態方法
</script>

Person.js

Ext.namespace("Ext.test");
Ext.test.Person = Ext.emptyFn;

//類靜態方法
Ext.test.Person.print = function(_name,_sex){
		var _person = new Ext.test.Person();
 		_person.name = _name;
	    _person.sex=_sex;
        _person.test();//調用類實例方法

}

Ext.apply(Ext.test.Person.prototype,{
			name:"",
			sex:"",
			test:function(){
				alert(String.format("姓名:{0},性別:{1}",this.name,this.sex));
			}
	});

5、支持構造器 (文件夾constructor中)

Person.html

<script src="Person.js"></script>
<script>
	Ext.test.Person.print("lian","男");// 調用類 靜態方法
</script>

Person.js

Ext.namespace("Ext.test");

// 構造方法
Ext.test.Person = function(_cfg){
	Ext.apply(this,_cfg);
};

// 類靜態方法
Ext.test.Person.print = function(_name,_sex){
		var _person = new Ext.test.Person({name:_name,sex:_sex});
        _person.test();// 調用類 實例方法
}

// 類實例方法
Ext.apply(Ext.test.Person.prototype,{
			test:function(){
				alert(String.format("姓名:{0},性別:{1}",this.name,this.sex));
			}
	});

6、支持類繼承 (文件夾extend中)

Person.html

<script src="Person.js"></script>
<script src="Student.js"></script>
<script src="Teacher.js"></script>
<script>
	var _teacher = new Ext.test.Teacher({name:"lian",sex:"男"});
	_teacher.test();

	var _student = new Ext.test.Student({name:"chen",sex:"女"});
	_student.test();
</script>

Person.js

Ext.namespace("Ext.test");

Ext.test.Person = function(_cfg){
	Ext.apply(this,_cfg);
};

Ext.apply(Ext.test.Person.prototype,{
	        job:"無",
			test:function(){
				alert(String.format("姓名:{0},性別:{1},角色:{2}",this.name,this.sex,this.job));
			}
	});

Student.js

Ext.namespace("Ext.test");

Ext.test.Student = function(_cfg){
	Ext.apply(this,_cfg);
};

Ext.extend(Ext.test.Student,Ext.test.Person,{
		job:"學生"
	});

Teacher.js

Ext.namespace("Ext.test");

Ext.test.Teacher = function(_cfg){
	Ext.apply(this,_cfg);
};

Ext.extend(Ext.test.Teacher,Ext.test.Person,{
		job:"教師"
	});

7、支持類方法重寫 (文件夾override中)

Student.js

Ext.namespace("Ext.test");

Ext.test.Student = function(_cfg){
	Ext.apply(this,_cfg);
};

//重寫test()方法
Ext.extend(Ext.test.Student,Ext.test.Person,{
		test:function(){
				alert(String.format("{0}是一位{1}學生",this.name,this.sex));
			}
	});

Teacher.js

Ext.namespace("Ext.test");

Ext.test.Teacher = function(_cfg){
	Ext.apply(this,_cfg);
};

Ext.extend(Ext.test.Teacher,Ext.test.Person,{
			test:function(){
				alert(String.format("{0}是一位{1}老師",this.name,this.sex));
			}
	});

其餘的與類繼承一樣。

8、支持命名空間別名 (文件夾nameShort中)

Person.html

<script src="Person.js"></script>
<script>
	Pk.Person.print("lian","男");
</script>

Person.js

Ext.namespace("Ext.test");

Pk=Ext.test;//命名空間別名

Ext.test.Person = function(_cfg){
	Ext.apply(this,_cfg);
};

Ext.test.Person.print=function(_name,_sex){

	var _person = new Pk.Person({name:_name,sex:_sex});
	_person.test();
}

Ext.apply(Ext.test.Person.prototype,{
			test:function(){
				alert(String.format("姓名:{0},性別:{1}",this.name,this.sex));
			}
	});

9、支持類別名 (文件夾nameAlis中)

Person.html

<script src="Person.js"></script>
<script>
	PN.print("bcterry","男");
</script>

Person.js

Ext.namespace("Ext.test");

Ext.test.Person = function(_cfg){
	Ext.apply(this,_cfg);
};

PN=Ext.test.Person;//類別名

Ext.test.Person.print=function(_name,_sex){

	var _person = new PN({name:_name,sex:_sex});
	_person.test();
}

Ext.apply(Ext.test.Person.prototype,{
			test:function(){
				alert(String.format("姓名:{0},性別:{1}",this.name,this.sex));
			}
	});

10、支持事件隊列 (文件夾event中)

Person.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 事件（訂閱） </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"/>
<script src="../adapter/ext/ext-base.js"></script>
<script src="../ext-all.js"></script>
<script src="Person.js"></script>
<script>
    var _person = null;
	button_click = function(){
		_person.setName(prompt("請輸入姓名：",""));
		_person.setSex(prompt("請輸入性別：",""));
	}
	
	//先加載
	Ext.onReady(function(){
		var txt_name = Ext.get("txt_name");//獲得dom對象 
		var txt_sex = Ext.get("txt_sex");

		_person = new Ext.test.Person();

		//註冊事件
        _person.on("namechange",function(_person,xx,yy){
									alert(1);
									txt_name.dom.value = yy;	
		                        });

		_person.on("sexchange",function(_person,_old,_new){
									txt_sex.dom.value = _new;			
		                        });

        _person.on("namechange",function(_person,_old,_new){
									document.title = _new;	//設置標題		
		                        });

	});

</script>
</HEAD>
<BODY>
姓名:<INPUT TYPE="text" id="txt_name" NAME="" maxlength="10">
性別:<INPUT TYPE="text" id="txt_sex" NAME="" maxlength="10">
<INPUT TYPE="button" value="輸入" NAME="" οnclick="button_click()">
</BODY>
</HTML>

Person.js

Ext.namespace("Ext.test");

Ext.test.Person = function(){
	//定義事件
	this.addEvents(
		"namechange",
		"sexchange"
	);
};

Ext.extend(Ext.test.Person,Ext.util.Observable,{
	     name:"",
		 sex:"",
		 setName:function(_name){
            if(this.name!=_name){
				alert(0);
                 this.fireEvent("namechange",this,this.name,_name);//處理事件者
                 this.name = _name;
            }
		 },
		 setSex:function(_sex){
            if(this.sex!=_sex){
                 this.fireEvent("sexchange",this,this.sex,_sex); 
                 this.sex = _sex;
            }
		 }
});

EXTJS面向對象設計

AI 畫圖真刺激，手把手教你如何用 ComfyUI 來畫出刺激的圖

公司剛入職了一名 Java 中級開發，短短 4 行代碼居然湊齊了 3 個 bug！我哭了~~

公衆號5月C#/.NET熱文一覽

git 下載大陸鏡像地址

簡單的AJAX例子詳解

EXTJS面向對象設計

可變顏色標籤

Hibernate+Struts2實現簡單登錄註冊

引入JavaScript腳本代碼到HTML文檔中

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結