dojochina ExtJS学习笔记1

来源:互联网 发布:matlab求矩阵特征向量 编辑:程序博客网 时间:2024/03/29 03:09

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> 

 

原创粉丝点击