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，使用时还能再传入其它参数。
第二种就是写死了构造配置，使用时传什么参数都没用。

你可以尝试看看Ext.Component的源码，在目录：src/widgets/Component.js中