[第二讲]ExtJs在面向对象所处的努力

最新推荐文章于 2024-11-04 16:08:47 发布

Mr灬羽化

最新推荐文章于 2024-11-04 16:08:47 发布

阅读量591

点赞数

分类专栏： [DOJOchina]EXTJS 文章标签： extjs stylesheet function xhtml html button

本文链接：https://blog.csdn.net/yu624774720hua/article/details/6551925

版权

[DOJOchina]EXTJS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.支持命名空间

helloworld.js

Ext.namespace("Ext.dojochina") ;//命名空间 Ext.dojochina.HelloWorld = Ext.emptyFn ;//得到一个空的函数

helloworld.html

2.支持类实例属性

person.js

Ext.namespace("Ext.dojochina") ; Ext.dojochina.Person = Ext.emptyFn ; Ext.apply(Ext.dojochina.Person.prototype , { name:"陈治文" }) ;

person.html

3.支持类实例方法

person.js

Ext.namespace("Ext.dojochina") ; Ext.dojochina.Person = Ext.emptyFn ; Ext.apply(Ext.dojochina.Person.prototype , { name:"", sex:"", print:function(){ alert(String.format("姓名:{0},性别:{1}" , this.name , this.sex)) ; } }) ;

person.html

4.支持类静态方法

person.js

Ext.namespace("Ext.dojochina") ; Ext.dojochina.Person = function(_cfg){ Ext.apply(this , _cfg) ; } ; PN = Ext.dojochina.Person ; Ext.dojochina.Person.print = function(_name , _sex){ var _person = new PN({name:_name , sex:_sex}) ; _person.print() ; } Ext.apply(Ext.dojochina.Person.prototype , { print:function(){ alert(String.format("姓名:{0},性别:{1}" , this.name , this.sex)) ; } }) ;

persion.html

5.支持构造方法

Ext.namespace("Ext.dojochina") ; Ext.dojochina.Person = function(_cfg){ Ext.apply(this , _cfg) ; } ; Ext.dojochina.Person.print = function(_name , _sex){ var _person = new Ext.dojochina.Person({name:_name , sex:_sex}) ; _person.print() ; } Ext.apply(Ext.dojochina.Person.prototype , { print:function(){ alert(String.format("姓名:{0},性别:{1}" , this.name , this.sex)) ; } }) ;

6.支持类继承

student.js

Ext.namespace("Ext.dojochina") ; Ext.dojochina.Student = function(_cfg){ Ext.apply(this , _cfg) ; } ; Ext.extend(Ext.dojochina.Student , Ext.dojochina.Person , { job:"学生" }) ;

teacher.js

Ext.namespace("Ext.dojochina") ; Ext.dojochina.Teacher = function(_cfg){ Ext.apply(this , _cfg) ; } ; Ext.extend(Ext.dojochina.Teacher , Ext.dojochina.Person , { job:"教师" }) ;

person.js

Ext.namespace("Ext.dojochina") ; Ext.dojochina.Person = function(_cfg){ Ext.apply(this , _cfg) ; } ; Ext.apply(Ext.dojochina.Person.prototype , { job:"无", print:function(){ alert(String.format("姓名:{0},性别:{1},角色:{2}" , this.name , this.sex , this.job)) ; } }) ;

person.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" /> <title>类继承</title> <mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script> <mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script> <mce:script type="text/javascript" src="Person.js" mce_src="Person.js"></mce:script> <mce:script type="text/javascript" src="Teacher.js" mce_src="Teacher.js"></mce:script> <mce:script type="text/javascript" src="Student.js" mce_src="Student.js"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> </body> </html>

7.支持类实例方法重写

peison.js

Ext.namespace("Ext.dojochina") ; Ext.dojochina.Person = function(_cfg){ Ext.apply(this , _cfg) ; } ; Ext.apply(Ext.dojochina.Person.prototype , { print:function(){ alert(String.format("姓名:{0},性别:{1}" , this.name , this.sex)) ; } }) ;

student.js

Ext.namespace("Ext.dojochina") ; Ext.dojochina.Student = function(_cfg){ Ext.apply(this , _cfg) ; } ; Ext.extend(Ext.dojochina.Student , Ext.dojochina.Person , { print:function(){ alert(String.format("{0}是一位{1}学生" , this.name , this.sex)) ; } }) ;

teacher.js

Ext.namespace("Ext.dojochina") ; Ext.dojochina.Teacher = function(_cfg){ Ext.apply(this , _cfg) ; } ; Ext.extend(Ext.dojochina.Teacher , Ext.dojochina.Person , { print:function(){ alert(String.format("{0}是一位{1}老师" , this.name , this.sex)) ; } }) ;

person.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" /> <title>方法重写</title> <mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script> <mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script> <mce:script type="text/javascript" src="Person.js" mce_src="Person.js"></mce:script> <mce:script type="text/javascript" src="Teacher.js" mce_src="Teacher.js"></mce:script> <mce:script type="text/javascript" src="Student.js" mce_src="Student.js"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> </body> </html>

8.支持命名空间别名

person.js

Ext.namespace("Ext.dojochina") ; Dc = Ext.dojochina ; Ext.dojochina.Person = function(_cfg){ Ext.apply(this , _cfg) ; } ; Ext.dojochina.Person.print = function(_name , _sex){ var _person = new Dc.Person({name:_name , sex:_sex}) ; _person.print() ; } Ext.apply(Ext.dojochina.Person.prototype , { print:function(){ alert(String.format("姓名:{0},性别:{1}" , this.name , this.sex)) ; } }) ;

person.js

9.支持事件队列

person.js

Ext.namespace("Ext.dojochina") ; Ext.dojochina.Person = function(){ this.addEvents( "namechange", "sexchange" ) ; } ; Ext.extend(Ext.dojochina.Person , Ext.util.Observable , { name:"", sex:"", setName:function(_name){ if(this.name != _name){ 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 ; } } }) ;

person.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" /> <title>事件</title> <mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script> <mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script> <mce:script type="text/javascript" src="Person.js" mce_src="Person.js"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> 姓名:<input type="text" id="txt_name" maxlength="10"/><br/> 性别:<input type="text" id="txt_sex" maxlength="10"/><br/> <input type="button" value="输入" οnclick="button_click()"/> </body> </html>