日期:2014-05-16  浏览次数:20344 次

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