日期:2014-05-16 浏览次数:20344 次
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,使用时还能再传入其它参数。
第二种就是写死了构造配置,使用时传什么参数都没用。