程序博客网 > 区域填充算法

dojochina的ExtJS视频教程学习笔记(二

来源：互联网 发布：区域填充算法 编辑：程序博客网 时间：2024/04/27 22:23

EXTJS的面向对象程序设计

◆EXTJS在面向对象作出的努力

支持命名空间
支持类实例属性
支持类实例方法
支持类静态方法
支持构造方法
支持类继承
支持类实例方法重写
支持命名空间别名
支持类别名
支持事件队列

命名空间

定义：对于类的组织定义方式

代码举例：

view plaincopy to clipboardprint?
  1. Ext.namespace("Ext.dojochina");  



Java代码对照：

view plaincopy to clipboardprint?
  1. package Ext.dojochina;  



完整示例代码：view

view plaincopy to clipboardprint?
  1. // namespace.js   
  2.   
  3.     Ext.namespace("Ext.dojochina");   
  4.   
  5.     Ext.dojochina.HelloWorld = Ext.emptyFn;  


view plaincopy to clipboardprint?
  1. <html xmlns="http://www.w3.org/1999/xhtml" >   
  2. <head>   
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  4. <title>命名空间</title>   
  5. <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />   
  6. <script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>   
  7. <script type="text/javascript" src="../extjs/ext-all.js"></script>   
  8. <script type="text/javascript" src="namespace.js"></script>   
  9. <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?
  1. ...   
  2. Ext.apply(Ext.dojochina.Person.prototype, {   
  3.     name: '陈治文'    
  4. });  



Java代码对照：

view plaincopy to clipboardprint?
  1. ...   
  2. private String name = "陈治文";   
  3.   
  4. public void setName(String name){   
  5.     this.name = name;   
  6. }   
  7. public String getName(){   
  8.     return this.name   
  9. }   
  10. ...  



完整示例代码：view

view plaincopy to clipboardprint?
  1. // property.js   
  2.   
  3.     Ext.namespace("Ext.dojochina");   
  4.     Ext.dojochina.Person = Ext.emptyFn;   
  5.     Ext.apply(Ext.dojochina.Person.prototype, {name: 'MacroChin'});  


view plaincopy to clipboardprint?
  1. <html xmlns="http://www.w3.org/1999/xhtml" >   
  2. <head>   
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  4. <title>类实例属性</title>   
  5. <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />   
  6. <script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>   
  7. <script type="text/javascript" src="../extjs/ext-all.js"></script>   
  8. <script type="text/javascript" src="property.js"></script>   
  9. <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?
  1. ...   
  2. print: function(){   
  3.     alert(String.format("姓名:{0},性别:{1}", this.name, this.sex));   
  4. }  



Java代码对照：

view plaincopy to clipboardprint?
  1. ...   
  2. public void print(){   
  3.     System.out.printf("姓名:%s,性别:%s", this.name, this.sex);   
  4. }  



完整示例代码：view

view plaincopy to clipboardprint?
  1. // dynamicMethod.js   
  2.   
  3.     Ext.namespace("Ext.dojochina");   
  4.     Ext.dojochina.Person = Ext.emptyFn;   
  5.     Ext.apply(Ext.dojochina.Person.prototype, {   
  6.         name: '',   
  7.         sex: '',   
  8.         print: function(){   
  9.             alert(String.format("姓名：{0}，性别：{1}", this.name, this.sex));   
  10.         }   
  11.     });  


view plaincopy to clipboardprint?
  1. <html xmlns="http://www.w3.org/1999/xhtml" >   
  2. <head>   
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  4. <title>类实例方法</title>   
  5. <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />   
  6. <script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>   
  7. <script type="text/javascript" src="../extjs/ext-all.js"></script>   
  8. <script type="text/javascript" src="dynamicMethod.js"></script>   
  9. <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?
  1. ...   
  2. Ext.dojochina.Person.print = function(name, sex){   
  3.     var p = new Ext.dojochina.Person();   
  4.     p.name = name;   
  5.     p.sex = sex;   
  6.     p.print();   
  7. }  



Java代码对照：

view plaincopy to clipboardprint?
  1. ...   
  2. public static void print(String name, String sex){   
  3.     Person person = new Person();   
  4.     person.setName(name);   
  5.     person.setSex(sex);   
  6.     person.print();   
  7. }  



完整示例代码：view

view plaincopy to clipboardprint?
  1. // staticMethod.js   
  2.   
  3.     Ext.namespace("Ext.dojochina");   
  4.     Ext.dojochina.Person = Ext.emptyFn;   
  5.   
  6.     Ext.dojochina.Person.print = function(name, sex){   
  7.         var p = new Ext.dojochina.Person();   
  8.         p.name = name;   
  9.         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?
  1. <html xmlns="http://www.w3.org/1999/xhtml" >   
  2. <head>   
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  4. <title>类静态方法</title>   
  5. <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />   
  6. <script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>   
  7. <script type="text/javascript" src="../extjs/ext-all.js"></script>   
  8. <script type="text/javascript" src="staticMethod.js"></script>   
  9. <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?
  1. Ext.dojochina.Person = function(_cfg){   
  2.     Ext.apply(this, _cfg);   
  3. }  



Java代码对照：

view plaincopy to clipboardprint?
  1. ...   
  2. public Person(String name, String sex){   
  3.     this.name = name;   
  4.     this.sex = sex;   
  5. }   
  6. ...  



完整示例代码：view

view plaincopy to clipboardprint?
  1. // initialize.js   
  2.   
  3.     Ext.namespace("Ext.dojochina");   
  4.   
  5.     Ext.dojochina.Person = function(_cfg){   
  6.         Ext.apply(this, _cfg);   
  7.     }   
  8.   
  9.     Ext.dojochina.Person.print = function(name, sex){   
  10.         var person = new Ext.dojochina.Person({name: name, sex:sex});   
  11.         person.print();   
  12.     }   
  13.   
  14.     Ext.apply(Ext.dojochina.Person.prototype, {   
  15.         print: function(){   
  16.             alert(String.format("Name:{0} Sex:{1}", this.name, this.sex));   
  17.         }   
  18.     })  


view plaincopy to clipboardprint?
  1. <html xmlns="http://www.w3.org/1999/xhtml" >   
  2. <head>   
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  4. <title>构造方法</title>   
  5. <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />   
  6. <script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>   
  7. <script type="text/javascript" src="../extjs/ext-all.js"></script>   
  8. <script type="text/javascript" src="initialize.js"></script>   
  9. <script type="text/javascript">   
  10.   
  11.     Ext.dojochina.Person.print('PersonA', '女');   
  12.     Ext.dojochina.Person.print('PersonB', '男');   
  13.   
  14. </script>   
  15. </head>   
  16. <body>   
  17. </body>   
  18. </html>  



类继承

定义：对于类的一种扩展形式。

代码举例：

view plaincopy to clipboardprint?
  1. Ext.extend(Ext.dojochina,Strudent,   
  2.     Ext.dojochina.Person, {   
  3.         job: '学生'  
  4.     }   
  5. );  



Java代码比照：

view plaincopy to clipboardprint?
  1. class Student extend Person{   
  2.     public Student(String name, String sex){   
  3.         super(name, sex);   
  4.         this.setJob("学生");   
  5.     }   
  6. }  



完整示例代码：view

view plaincopy to clipboardprint?
  1. // Person.js   
  2.   
  3. Ext.namespace("Ext.dojochina");   
  4.   
  5. Ext.dojochina.Person = function(_cfg){Ext.apply(this, _cfg)};   
  6.   
  7. Ext.apply(Ext.dojochina.Person.prototype, {   
  8.     job: '无',   
  9.     print: function(){   
  10.         alert(String.format('姓名：{0} 性别：{1} 角色：{2}', this.name, this.sex, this.job));   
  11.     }   
  12. });  


view plaincopy to clipboardprint?
  1. // Teacher.js   
  2.   
  3. Ext.namespace("Ext.dojochina");   
  4.   
  5. Ext.dojochina.Teacher = function(_cfg){Ext.apply(this, _cfg);};   
  6.   
  7. Ext.extend(Ext.dojochina.Teacher, Ext.dojochina.Person, {job: '教师'});  


view plaincopy to clipboardprint?
  1. // Student.js   
  2.   
  3. Ext.namespace("Ext.dojochina");   
  4.   
  5. Ext.dojochina.Student = function(_cfg){Ext.apply(this, _cfg);};   
  6.   
  7. Ext.extend(Ext.dojochina.Student, Ext.dojochina.Person, {job: '学生'});  


view plaincopy to clipboardprint?
  1. <html xmlns="http://www.w3.org/1999/xhtml" >   
  2. <head>   
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  4. <title>类继承</title>   
  5. <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />   
  6. <script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>   
  7. <script type="text/javascript" src="../extjs/ext-all.js"></script>   
  8. <script type="text/javascript" src="Person.js"></script>   
  9. <script type="text/javascript" src="Teacher.js"></script>   
  10. <script type="text/javascript" src="Student.js"></script>   
  11. <script type="text/javascript">   
  12.   
  13.     var t = new Ext.dojochina.Teacher({name:'老师A', sex:'女'});   
  14.     t.print();   
  15.   
  16.     var s = new Ext.dojochina.Student({name:'学生B', sex:'男'});   
  17.     s.print();   
  18.   
  19. </script>   
  20. </head>   
  21. <body>   
  22. </body>   
  23. </html>  



类实例方法重写

定义：子类在继承父类时对其已经存在的方法进行重新定义。

代码举例：

view plaincopy to clipboardprint?
  1. Ext.extend(Ext.dojochina.Teacher,   
  2.     Ext.dojochina.Person, {   
  3.         print: function(){   
  4.             alert(String.format('{0}是一位{1}老师', this.name, this.sex));   
  5.         }   
  6.     }   
  7. );  



完整示例代码：view

view plaincopy to clipboardprint?
  1. // Person.js   
  2.   
  3. Ext.namespace("Ext.dojochina");   
  4.   
  5. Ext.dojochina.Person = function(_cfg){Ext.apply(this, _cfg)};   
  6.   
  7. Ext.apply(Ext.dojochina.Person.prototype, {   
  8.     job: '无',   
  9.     print: function(){   
  10.         alert(String.format('姓名：{0} 性别：{1} 角色：{2}', this.name, this.sex, this.job));   
  11.     }   
  12. });  


view plaincopy to clipboardprint?
  1. // teacher_.js   
  2.   
  3. Ext.namespace("Ext.dojochina");   
  4.   
  5. Ext.dojochina.Teacher = function(_cfg){Ext.apply(this, _cfg);};   
  6.   
  7. Ext.extend(Ext.dojochina.Teacher, Ext.dojochina.Person, {   
  8.     print: function(){   
  9.         alert(String.format('{0}是一位{1}老师', this.name, this.sex));   
  10.     }   
  11. });  


view plaincopy to clipboardprint?
  1. // student_.js   
  2.   
  3. Ext.namespace("Ext.dojochina");   
  4.   
  5. Ext.dojochina.Student = function(_cfg){Ext.apply(this, _cfg);};   
  6.   
  7. Ext.extend(Ext.dojochina.Student, Ext.dojochina.Person, {   
  8.     print: function(){   
  9.         alert(String.format('{0}是一位{1}学生', this.name, this.sex));   
  10.     }   
  11. });  


view plaincopy to clipboardprint?
  1. <html xmlns="http://www.w3.org/1999/xhtml" >   
  2. <head>   
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  4. <title>类方法重写</title>   
  5. <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />   
  6. <script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>   
  7. <script type="text/javascript" src="../extjs/ext-all.js"></script>   
  8. <script type="text/javascript" src="Person.js"></script>   
  9. <script type="text/javascript" src="teacher_.js"></script>   
  10. <script type="text/javascript" src="student_.js"></script>   
  11. <script type="text/javascript">   
  12.   
  13.     var p = new Ext.dojochina.Person({name:'PersonX', sex: '男'});   
  14.     p.print();   
  15.   
  16.     var t = new Ext.dojochina.Teacher({name:'老师A', sex:'女'});   
  17.     t.print();   
  18.   
  19.     var s = new Ext.dojochina.Student({name:'学生B', sex:'男'});   
  20.     s.print();   
  21.   
  22. </script>   
  23. </head>   
  24. <body>   
  25. </body>   
  26. </html>  



命名空间别名

定义：对于命名空间的别称。(别名首字母要大写)

代码举例：

view plaincopy to clipboardprint?
  1. Dc = Ext.dojochina;  



完整示例代码：view

view plaincopy to clipboardprint?
  1. // namespaceShort.js   
  2.   
  3. Ext.namespace('Ext.dojochina');   
  4.   
  5. Dc = Ext.dojochina;   
  6.   
  7. Dc.Person = function(_cfg){Ext.apply(this, _cfg);};   
  8.   
  9. Dc.Person.print = function(name, sex){   
  10.     var p = new Dc.Person({name: name , sex: sex});   
  11.     p.print();   
  12. }   
  13.   
  14. Ext.apply(Dc.Person.prototype,{   
  15.     print: function(){   
  16.         alert(String.format('姓名：{0}, 性别：{1}', this.name, this.sex));   
  17.     }   
  18. });  


view plaincopy to clipboardprint?
  1. <html xmlns="http://www.w3.org/1999/xhtml" >   
  2. <head>   
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  4. <title>命名空间别名</title>   
  5. <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />   
  6. <script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>   
  7. <script type="text/javascript" src="../extjs/ext-all.js"></script>   
  8. <script type="text/javascript" src="namespaceShort.js"></script>   
  9. <script type="text/javascript">   
  10.   
  11.     var p = new Dc.Person({name:'MC', sex:'M'});   
  12.     p.print();   
  13.   
  14.     var t = new Ext.dojochina.Person({name:'MacroChin', sex:'男'});   
  15.     t.print();   
  16.   
  17. </script>   
  18. </head>   
  19. <body>   
  20. </body>   
  21. </html>  



类别名

定义：对于类的别称。(别名全部字母都要大写)

代码举例：

view plaincopy to clipboardprint?
  1. PN=Ext.dojochina.Person;  



完整示例代码：view

view plaincopy to clipboardprint?
  1. // classShort.js   
  2.   
  3. Ext.namespace('Ext.dojochina');   
  4.   
  5. Ext.dojochina.Person = function(_cfg){Ext.apply(this, _cfg);};   
  6.   
  7. PN = Ext.dojochina.Person;   
  8.   
  9. PN.print = function(name, sex){   
  10.     var p = new PN({name: name, sex: sex});   
  11.     p.print();   
  12. };   
  13.   
  14. Ext.apply(PN.prototype, {   
  15.     print: function(){   
  16.         alert(String.format('姓名: {0} , 性别: {1}', this.name, this.sex));   
  17.     }   
  18. });  


view plaincopy to clipboardprint?
  1. <html xmlns="http://www.w3.org/1999/xhtml" >  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  4. <title>类别名</title>  
  5. <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />  
  6. <script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>  
  7. <script type="text/javascript" src="../extjs/ext-all.js"></script>  
  8. <script type="text/javascript" src="classShort.js"></script>  
  9. <script type="text/javascript">  
  10.   
  11.     var p = new PN({name:'MC', sex:'M'});   
  12.     p.print();   
  13.   
  14.     var t = new Ext.dojochina.Person({name:'MacroChin', sex:'Male'});   
  15.     t.print();   
  16.   
  17. </script>  
  18. </head>  
  19. <body>  
  20. </body>  
  21. </html>  



事件

定义：对于外界影响的反应，在ExtJS还支持事件队列模式，由 Ext.util.Observable类支持。

完整示例代码：view

view plaincopy to clipboardprint?
  1. // event.js   
  2.   
  3. Ext.namespace('Ext.dojochina');   
  4.   
  5. Ext.dojochina.Person = function(){   
  6.     this.addEvents(   
  7.         'namechange',   
  8.         'sexchange'  
  9.     );   
  10. };   
  11.   
  12. Ext.extend(Ext.dojochina.Person, Ext.util.Observable, {   
  13.     name: '' ,   
  14.     sex: '' ,   
  15.     setName: function(_name){   
  16.         if(this.name != _name){   
  17.             this.fireEvent('namechange', this, this.name, _name);   
  18.             this.name = _name;   
  19.         }   
  20.     },   
  21.     setSex: function(_sex){   
  22.         if(this.sex != _sex){   
  23.             this.fireEvent('sexchange', this, this.sex, _sex);   
  24.             this.sex = _sex;   
  25.         }   
  26.     }   
  27. });  


view plaincopy to clipboardprint?
  1. <html xmlns="http://www.w3.org/1999/xhtml" >   
  2. <head>   
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  4. <title>事件</title>   
  5. <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />   
  6. <script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>   
  7. <script type="text/javascript" src="../extjs/ext-all.js"></script>   
  8. <script type="text/javascript" src="event.js"></script>   
  9. <script type="text/javascript">   
  10.   
  11.     var person = null;   
  12.   
  13.     button_click = function(){   
  14.         person.setName(prompt('请输入姓名', ''));   
  15.         person.setSex(prompt('请输入性别', ''));   
  16.     }   
  17.   
  18.     Ext.onReady(function(){   
  19.   
  20.         var txt_name = Ext.get('txt_name');   
  21.         var txt_sex = Ext.get('txt_sex');   
  22.   
  23.         person = new Ext.dojochina.Person();   
  24.   
  25.         person.on('namechange', function(person, oldVal, newVal){   
  26.             txt_name.dom.value = newVal;   
  27.         });   
  28.   
  29.         person.on('sexchange', function(person, oldVal, newVal){   
  30.             txt_sex.dom.value = newVal;   
  31.         });   
  32.   
  33.         person.on('namechange', function(person, oldVal, newVal){   
  34.             document.title = newVal;   
  35.         });   
  36.   
  37.     });   
  38.   
  39. </script>   
  40. </head>   
  41. <body>   
  42.   
  43. 姓名:<input type="text" id="txt_name" /> <BR/>   
  44. 性别:<input type="text" id="txt_sex" /> <BR/>   
  45. <button onclick="button_click()">输入</button>   
  46.   
  47. </body>   
  48. </html>  



◆EXTJS的另几种面向对象设计体现

GWT-EXT为JAVA程序员编写EXTJS应用提供了可能
EXTTLD为JSP程序员的标签化部署EXTJS提供了可能
EXTSharp为C#程序员编写EXTJS的应用提供了可能

区域填充算法 区域填充算法
原创粉丝点击
热门IT博客
剩女为什么单身知乎剩女为什么单身知乎
重庆八中数据谷中学重庆八中数据谷中学
淘宝商标侵权处罚
恺英网络王悦的女儿
头像软件哪个好
数据标注
ubuntu 改变用户目录
淘宝访客很高转化率低
汉语有多难 知乎
websocket java服务端
amc分析知乎
淘宝里面卖cd的
纸质阅读与网络阅读
js设置select默认选中
php分班系统
手机linux系统安装教程
无主之地2 for mac
淘宝上刻章怎么没人查
实验五银行家算法代码
小日向未来知乎
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 怀孕可以吃燕窝吗 干燕窝的食用方法 燕窝储存方式 孕妇吃燕窝对胎儿有什么好处 孕妇吃燕窝好吗 燕窝怎么炖对孕妇好 马来西亚燕窝价格 燕窝的做法与吃法 孕妇怎么吃燕窝 燕窝如何保存 燕窝真的有营养吗 燕窝不能和什么一起吃 燕窝怎么泡发 碗燕燕窝多少钱一盒 燕窝泡发时间 燕窝保存方法 燕窝泡发看真假 燕窝发霉了怎么办 燕窝营养价值 泰国燕窝价格 燕窝可以隔夜吃吗 燕窝图片高清 燕窝怎么来的 真假燕窝泡发前后图 燕窝如何辨别真假 来月经能吃燕窝吗 燕窝挑毛技巧 怀孕能吃燕窝吗 印尼燕窝多少钱一克 燕窝炖久了是不是成水了 燕窝泡发前后图 燕窝的吃法与用量 燕窝对孕妇有什么好处 燕窝吃多久才有效果 炖燕窝的方法 燕窝什么味道 小孩能吃燕窝吗 燕窝是什么样子的 即食燕窝怎么吃 燕窝多少钱一盒 燕窝什么时候吃

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里