extJS 在面向对象方面的支持

最新推荐文章于 2017-06-22 15:33:00 发布

anialy

最新推荐文章于 2017-06-22 15:33:00 发布

阅读量1.1k

点赞数

分类专栏： extJS

本文链接：https://blog.csdn.net/anialy/article/details/7759152

版权

extJS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

简述：

研究extJS可以OO的继承

知识点：

1. extJS的继承方式

1) Ext.extend( INHERITENCE_CLASS,BASE_CLASS , { func:function(){....} }

在第三个参数里，覆写（override)基类的函数

2)Ext.extend( Base , { func : function(){...} }

直接覆写（override)包括基类的构造函数，成员函数

代码：

1、1）Ext.extend(INHERITENCE_CLASS,BASE_CLASS,{func:function(){....}}

test2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test2.html</title>
    <link rel="stylesheet" type="text/css" href="../ext-3.3.1/resources/css/ext-all.css"></link>
	<script type="text/javascript" src="../ext-3.3.1/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="../ext-3.3.1/ext-all.js"></script>
  
    <script type="text/javascript">
    /****************declare Person Class*************************/
    var Person = function(personInfo){
      this.name = personInfo.name;
      this.age = personInfo.age; 
    };
    Person.prototype.getInfo = function(){
      return this.name + ", " + this.age;
    }
    
    /************************Worker Class**************************/
    var Worker = function(workerInfo){
      Person.prototype.constructor.call(this,workerInfo);
      this.job = workerInfo.job;
    }
    
    /************************Ext extend function ******************/
    Ext.extend(Worker,Person,{
      //override getInfo of Person Class
      getInfo:function(){
      	return this.name + ", " + this.age + ", " + this.job;
      }  
    })
    
    
    /************************Test**********************************/
    var someone = {
      name : "John",
      age  : 21,
      job  : "IT_Worker"
    };
    
    var worker = new Worker(someone);
    document.write(worker.getInfo());

    </script>

  </head>
  
  <body>
  </body>
</html>

输出：

1、2）Ext.extend( Base , { func : function(){...} }

test3.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test3.html</title>
    <link rel="stylesheet" type="text/css" href="../ext-3.3.1/resources/css/ext-all.css"></link>
	<script type="text/javascript" src="../ext-3.3.1/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="../ext-3.3.1/ext-all.js"></script>
  
    <script type="text/javascript">
    /****************declare Person Class*************************/
    var Person = function(personInfo){
      this.name = personInfo.name;
      this.age = personInfo.age; 
    };
    Person.prototype.getInfo = function(){
      return this.name + ", " + this.age;
    };
    
    /************************Worker Class**************************/
    var Worker = Ext.extend(Person,{
      constructor:function(workerInfo){
        Person.prototype.constructor.call(this,workerInfo);//override the constructor
        this.job = workerInfo.job;     
      },
      getInfo:function(){ //override getInfo of Person Class
        return this.name + ", " + this.age + ", " + this.job;
      }
    });
    
    /************************Test**********************************/
    var someone = {
      name : "John",
      age  : 21,
      job  : "IT_Worker"
    };
    
    var person = new Person(someone);
    document.write("PersonInfo: " + person.getInfo() + "<br>");
    
    var worker = new Worker(someone);
    document.write("WorkerInfo: " + worker.getInfo());

    </script>

  </head>
  
  <body>
  </body>
</html>

输出：