EXTJS的面向对象程序设计
◆EXTJS在面向对象作出的努力
支持命名空间
支持类实例属性
支持类实例方法
支持类静态方法
支持构造方法
支持类继承
支持类实例方法重写
支持命名空间别名
支持类别名
支持事件队列
命名空间
定义:对于类的组织定义方式
代码举例:
view plaincopy to clipboardprint?
01.Ext.namespace("Ext.dojochina");
view plaincopy to clipboardprint?
01.Ext.namespace("Ext.dojochina");
Ext.namespace("Ext.dojochina");
Java代码对照:
view plaincopy to clipboardprint?
01.package Ext.dojochina;
view plaincopy to clipboardprint?
01.package Ext.dojochina;
package Ext.dojochina;
完整示例代码:view
view plaincopy to clipboardprint?
01.// namespace.js
02.
03. Ext.namespace("Ext.dojochina");
04.
05. Ext.dojochina.HelloWorld = Ext.emptyFn;
view plaincopy to clipboardprint?
01.// namespace.js
02.
03. Ext.namespace("Ext.dojochina");
04.
05. Ext.dojochina.HelloWorld = Ext.emptyFn;
// namespace.js
Ext.namespace("Ext.dojochina");
Ext.dojochina.HelloWorld = Ext.emptyFn;
view plaincopy to clipboardprint?
01.<html xmlns="http://www.w3.org/1999/xhtml" >
02.<head>
03.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
04.<title>命名空间</title>
05.<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
06.<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
07.<script type="text/javascript" src="../extjs/ext-all.js"></script>
08.<script type="text/javascript" src="namespace.js"></script>
09.<script type="text/javascript">
10.
11. new Ext.dojochina.HelloWorld();
12.
13.</script>
14.</head>
15.<body>
16.</body>
17.</html>
view plaincopy to clipboardprint?
01.<html xmlns="http://www.w3.org/1999/xhtml" >
02.<head>
03.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
04.<title>命名空间</title>
05.<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
06.<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
07.<script type="text/javascript" src="../extjs/ext-all.js"></script>
08.<script type="text/javascript" src="namespace.js"></script>
09.<script type="text/javascript">
10.
11. new Ext.dojochina.HelloWorld();
12.
13.</script>
14.</head>
15.<body>
16.</body>
17.</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>命名空间</title>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script type="text/javascript" src="namespace.js"></script>
<script type="text/javascript">
new Ext.dojochina.HelloWorld();
</script>
</head>
<body>
</body>
</html>
类实例属性
定义:对于一个实例的特征描述。
代码举例:
view plaincopy to clipboardprint?
01....
02.Ext.apply(Ext.dojochina.Person.prototype, {
03. name: '陈治文'
04.});
view plaincopy to clipboardprint?
01....
02.Ext.apply(Ext.dojochina.Person.prototype, {
03. name: '陈治文'
04.});
...
Ext.apply(Ext.dojochina.Person.prototype, {
name: '陈治文'
});
Java代码对照:
view plaincopy to clipboardprint?
01....
02.private String name = "陈治文";
03.
04.public void setName(String name){
05. this.name = name;
06.}
07.public String getName(){
08. return this.name
09.}
10....
view plaincopy to clipboardprint?
01....
02.private String name = "陈治文";
03.
04.public void setName(String name){
05. this.name = name;
06.}
07.public String getName(){
08. return this.name
09.}
10....
...
private String name = "陈治文";
public void setName(String name){
this.name = name;
}
public String getName(){
return this.name
}
...
完整示例代码:view
view plaincopy to clipboardprint?
01.// property.js
02.
03. Ext.namespace("Ext.dojochina");
04. Ext.dojochina.Person = Ext.emptyFn;
05. Ext.apply(Ext.dojochina.Person.prototype, {name: 'MacroChin'});
view plaincopy to clipboardprint?
01.// property.js
02.
03. Ext.namespace("Ext.dojochina");
04. Ext.dojochina.Person = Ext.emptyFn;
05. Ext.apply(Ext.dojochina.Person.prototype, {name: 'MacroChin'});
// property.js
Ext.namespace("Ext.dojochina");
Ext.dojochina.Person = Ext.emptyFn;
Ext.apply(Ext.dojochina.Person.prototype, {name: 'MacroChin'});
view plaincopy to clipboardprint?
01.<html xmlns="http://www.w3.org/1999/xhtml" >
02.<head>
03.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
04.<title>类实例属性</title>
05.<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
06.<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
07.<script type="text/javascript" src="../extjs/ext-all.js"></script>
08.<script type="text/javascript" src="property.js"></script>
09.<script type="text/javascript">
10.
11. var person=new Ext.dojochina.Person();
12. alert(person.name);
13. person.name='AotherPerson';
14. alert(person.name);
15.
16.</script>
17.</head>
18.<body>
19.</body>
20.</html>
view plaincopy to clipboardprint?
01.<html xmlns="http://www.w3.org/1999/xhtml" >
02.<head>
03.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
04.<title>类实例属性</title>
05.<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
06.<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
07.<script type="text/javascript" src="../extjs/ext-all.js"></script>
08.<script type="text/javascript" src="property.js"></script>
09.<script type="text/javascript">
10.
11. var person=new Ext.dojochina.Person();
12. alert(person.name);
13. person.name='AotherPerson';
14. alert(person.name);
15.
16.</script>
17.</head>
18.<body>
19.</body>
20.</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>类实例属性</title>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script type="text/javascript" src="property.js"></script>
<script type="text/javascript">
var person=new Ext.dojochina.Person();
alert(person.name);
person.name='AotherPerson';
alert(person.name);
</script>
</head>
<body>
</body>
</html>
类实例方法
定义:一个对象所能具有的功能与动作。
代码举例:
view plaincopy to clipboardprint?
01....
02.print: function(){
03. alert(String.format("姓名:{0},性别:{1}", this.name, this.sex));
04.}
view plaincopy to clipboardprint?
01....
02.print: function(){
03. alert(String.format("姓名:{0},性别:{1}", this.name, this.sex));
04.}
...
print: function(){
alert(String.format("姓名:{0},性别:{1}", this.name, this.sex));
}
Java代码对照:
view plaincopy to clipboardprint?
01....
02.public void print(){
03. System.out.printf("姓名:%s,性别:%s", this.name, this.sex);
04.}
view plaincopy to clipboardprint?
01....
02.public void print(){
03. System.out.printf("姓名:%s,性别:%s", this.name, this.sex);
04.}
...
public void print(){
System.out.printf("姓名:%s,性别:%s", this.name, this.sex);
}
完整示例代码:view
view plaincopy to clipboardprint?
01.// dynamicMethod.js
02.
03. Ext.namespace("Ext.dojochina");
04. Ext.dojochina.Person = Ext.emptyFn;
05. Ext.apply(Ext.dojochina.Person.prototype, {
06. name: '',
07. sex: '',
08. print: function(){
09. alert(String.format("姓名:{0},性别:{1}", this.name, this.sex));
10. }
11. });
view plaincopy to clipboardprint?
01.// dynamicMethod.js
02.
03. Ext.namespace("Ext.dojochina");
04. Ext.dojochina.Person = Ext.emptyFn;
05. Ext.apply(Ext.dojochina.Person.prototype, {
06. name: '',
07. sex: '',
08. print: function(){
09. alert(String.format("姓名:{0},性别:{1}", this.name, this.sex));
10. }
11. });
// dynamicMethod.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));
}
});
view plaincopy to clipboardprint?
01.<html xmlns="http://www.w3.org/1999/xhtml" >
02.<head>
03.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
04.<title>类实例方法</title>
05.<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
06.<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
07.<script type="text/javascript" src="../extjs/ext-all.js"></script>
08.<script type="text/javascript" src="dynamicMethod.js"></script>
09.<script type="text/javascript">
10.
11. var person = new Ext.dojochina.Person();
12.
13. person.name = 'MacroChin';
14. person.sex = '男';
15. person.print();
16.
17. person.name = 'Ann';
18. person.sex = '女';
19. person.print();
20.
21.</script>
22.</head>
23.<body>
24.</body>
25.</html>
view plaincopy to clipboardprint?
01.<html xmlns="http://www.w3.org/1999/xhtml" >
02.<head>
03.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
04.<title>类实例方法</title>
05.<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
06.<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
07.<script type="text/javascript" src="../extjs/ext-all.js"></script>
08.<script type="text/javascript" src="dynamicMethod.js"></script>
09.<script type="text/javascript">
10.
11. var person = new Ext.dojochina.Person();
12.
13. person.name = 'MacroChin';
14. person.sex = '男';
15. person.print();
16.
17. person.name = 'Ann';
18. person.sex = '女';
19. person.print();
20.
21.</script>
22.</head>
23.<body>
24.</body>
25.</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>类实例方法</title>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script type="text/javascript" src="dynamicMethod.js"></script>
<script type="text/javascript">
var person = new Ext.dojochina.Person();
person.name = 'MacroChin';
person.sex = '男';
person.print();
person.name = 'Ann';
person.sex = '女';
person.print();
</script>
</head>
<body>
</body>
</html>
类静态方法
定义:在一个类级别上共享的方法。
代码举例:
view plaincopy to clipboardprint?
01....
02.Ext.dojochina.Person.print = function(name, sex){
03. var p = new Ext.dojochina.Person();
04. p.name = name;
05. p.sex = sex;
06. p.print();
07.}
view plaincopy to clipboardprint?
01....
02.Ext.dojochina.Person.print = function(name, sex){
03. var p = new Ext.dojochina.Person();
04. p.name = name;
05. p.sex = sex;
06. p.print();
07.}
...
Ext.dojochina.Person.print = function(name, sex){
var p = new Ext.dojochina.Person();
p.name = name;
p.sex = sex;
p.print();
}
Java代码对照:
view plaincopy to clipboardprint?
01....
02.public static void print(String name, String sex){
03. Person person = new Person();
04. person.setName(name);
05. person.setSex(sex);
06. person.print();
07.}
view plaincopy to clipboardprint?
01....
02.public static void print(String name, String sex){
03. Person person = new Person();
04. person.setName(name);
05. person.setSex(sex);
06. person.print();
07.}
...
public static void print(String name, String sex){
Person person = new Person();
person.setName(name);
person.setSex(sex);
person.print();
}
完整示例代码:view
view plaincopy to clipboardprint?
01.// staticMethod.js
02.
03. Ext.namespace("Ext.dojochina");
04. Ext.dojochina.Person = Ext.emptyFn;
05.
06. Ext.dojochina.Person.print = function(name, sex){
07. var p = new Ext.dojochina.Person();
08. p.name = name;
09. p.sex = sex;
10. p.print();
11. }
12.
13. Ext.apply(Ext.dojochina.Person.prototype, {
14. name: '',
15. sex: '',
16. print: function(){
17. alert(String.format("姓名:{0},性别:{1}", this.name, this.sex));
18. }
19. });
view plaincopy to clipboardprint?
01.// staticMethod.js
02.
03. Ext.namespace("Ext.dojochina");
04. Ext.dojochina.Person = Ext.emptyFn;
05.
06. Ext.dojochina.Person.print = function(name, sex){
07. var p = new Ext.dojochina.Person();
08. p.name = name;
09. p.sex = sex;
10. p.print();
11. }
12.
13. Ext.apply(Ext.dojochina.Person.prototype, {
14. name: '',
15. sex: '',
16. print: function(){
17. alert(String.format("姓名:{0},性别:{1}", this.name, this.sex));
18. }
19. });
// staticMethod.js
Ext.namespace("Ext.dojochina");
Ext.dojochina.Person = Ext.emptyFn;
Ext.dojochina.Person.print = function(name, sex){
var p = new Ext.dojochina.Person();
p.name = name;
p.sex = sex;
p.print();
}
Ext.apply(Ext.dojochina.Person.prototype, {
name: '',
sex: '',
print: function(){
alert(String.format("姓名:{0},性别:{1}", this.name, this.sex));
}
});
view plaincopy to clipboardprint?
01.<html xmlns="http://www.w3.org/1999/xhtml" >
02.<head>
03.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
04.<title>类静态方法</title>
05.<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
06.<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
07.<script type="text/javascript" src="../extjs/ext-all.js"></script>
08.<script type="text/javascript" src="staticMethod.js"></script>
09.<script type="text/javascript">
10.
11. Ext.dojochina.Person.print('MacroChin', '男');
12. Ext.dojochina.Person.print('Ann', '女');
13.
14.</script>
15.</head>
16.<body>
17.</body>
18.</html>
view plaincopy to clipboardprint?
01.<html xmlns="http://www.w3.org/1999/xhtml" >
02.<head>
03.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
04.<title>类静态方法</title>
05.<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
06.<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
07.<script type="text/javascript" src="../extjs/ext-all.js"></script>
08.<script type="text/javascript" src="staticMethod.js"></script>
09.<script type="text/javascript">
10.
11. Ext.dojochina.Person.print('MacroChin', '男');
12. Ext.dojochina.Person.print('Ann', '女');
13.
14.</script>
15.</head>
16.<body>
17.</body>
18.</html>