Extjs 继承的使用

最新推荐文章于 2018-06-14 15:27:32 发布

原创最新推荐文章于 2018-06-14 15:27:32 发布 · 133 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #ITeye #JavaScript #Blog #ViewUI

ExtJS 专栏收录该内容

10 篇文章

订阅专栏

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中