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="" ></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; } }});
页:
[1]