Extjs 承继的使用

Extjs 继承的使用

Javascript原始的继承写法：

// Traditional constructor:  Ext.Foo = function(config){      // call superclass constructor:      Ext.Foo.superclass.constructor.call(this, config);        this.addEvents({          // add events      });  };  Ext.extend(Ext.Foo, Ext.Bar, {     // class body  }  

Extjs中替换constructor，写法如下：

// initComponent replaces the constructor:  Ext.Foo = Ext.extend(Ext.Bar, {      initComponent : function(){          // call superclass initComponent          Ext.Container.superclass.initComponent.call(this);            this.addEvents({              // add events          });      }  }  

另外的写法：

IndexPage = Ext.extend(Ext.Viewport, {              initComponent : function() {                  this.items = [{                          // 内容                          }];                  IndexPage.superclass.initComponent.call(this);              }          });  

IndexPage = Ext.extend(Ext.Viewport, {              constructor : function() {                  IndexPage.superclass.constructor.call(this, {                          // 内容                          });              }          }); 

还有种写法. （未验证）

var IndexPage = function(){ IndexPage.superclass.constructor.call(this, {                          // 内容                          });  } Ext.extend(Ext.Viewport,IndexPage , {              initComponent : function() {                  this.items = [{                          // 内容                          }];                  IndexPage.superclass.initComponent.call(this);              }          });  

在Ext中，组件的constructor会调用Ext.apply(this, config)，即将构造的配置应用到自身，然后调用initComponent进行组件初始化。

第一种方法扩展出的组件，只会修改items，使用时还能再传入其它参数。
第二种就是写死了构造配置，使用时传什么参数都没用。