ExtJS 组件的扩展和继承（一）

最新推荐文章于 2016-06-07 11:51:26 发布

xiaoshang

最新推荐文章于 2016-06-07 11:51:26 发布

阅读量1.4k

点赞数

分类专栏： ExtJS 文章标签： extjs 扩展 object function layout 2010

ExtJS 专栏收录该内容

40 篇文章

订阅专栏

本文介绍如何使用Ext.extend()方法扩展ExtJS的Panel组件，并创建了一个名为MyComponent的新组件。通过设置xtype为'mycomponent'，可以方便地与其他组件集成，并实现延迟渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

扩展组件的时候，最好给其设置单独的 xtype，这样就能比较容易的和其他组件集成。

虽说扩展 ExtJS 的组件只不过是用 Ext.extend() 来实现，多少还是有些窍门。

例：扩展 Ext.Panel，得到名为 MyComponent 的组件。 xtype 设置为 mycomponent。

MyComponent = Ext.extend(Ext.Panel, {
    initComponent: function(){
        Ext.apply(this, {
            _name: 'MyComponent' // 非必须，调试时用 console.log 等可显示对象名。
        });
        this.items = [{
            // 如有固定的 items，须在此设定
        }];
        MyComponent.superclass.initComponent.call(this);
    }
});

// 注册 xtype，此后、只需指定属性 xtype: 'mycomponent' 即可实现组件的延迟渲染。

Ext.reg('mycomponent', MyComponent);

代码解释：

１．initComponent 函数
组件初始化时执行的函数。不过，这和 new 的时候所执行的 Contructor 有所不同。实际上，从 Component 的 Contructor 到 initComponent 的执行，有一个过程。一些有影响的参数，须在 initComponnt 中设定。
- 有关 Layout 的设置，必须在 initComponent 中实行。
- collapsible 须通过对象属性来设定。如：

items:[{
    xtype: 'mycomponent',
    collapsible: true
}]

２．Ext.reg
调用方法： Ext.reg(xtype字符串，对象) 。在任意组件中、加入以上 MyComponent 的时候、用 xtype 的方法指定，就能实现迟延渲染。

３．initComponent 内部的 this，是以上 MyComponent 的接口。

４．new MyComponent(config) 生成实例之后、initComponent 内部的 this 通过 apply 追加了属性。

５．Ext.apply(object1,object2)
这是把 object2 合并到 object1。通过这个函数，object2 所持有的属性和方法，全被追加到object1。同名属性将会被 object2 的属性所覆盖。

转载地址：http://my.opera.com/jlake/blog/2010/08/24/extjs