ExtJS 自定义组件

最新推荐文章于 2023-02-21 22:17:24 发布

原创最新推荐文章于 2023-02-21 22:17:24 发布 · 3.5k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#extjs #constructor #object #扩展 #function

Ext技术专栏收录该内容

9 篇文章

订阅专栏

本文介绍了在ExtJS中自定义组件的方法，强调了自定义组件的必要性，如保持编码风格一致和提高代码复用。主要探讨了两种扩展方式：一是通过重载`initComponent`函数，确保调用原函数并初始化所需属性；二是利用`constructor`方法，处理配置对象并调用父类构造函数。这两种方法都可以用于创建如文章列表等定制化的组件。

用一段时间EXT，觉得自定义组件还是很有必要

1、不改变Ext的编码风格

2、易于重复利用

扩展可能是基于官方控件的扩展也可能是基于官方基础组件扩展，第一种比较常用，第二种我都去网上Download。。。

第一种扩展

extend (Object subclass,Object superclass,[Object overrides] : Object

比如需要一个文章列表

//完全复制一个自己的grid，没有意义

//第一种方法是重载initComponent函数
var myArticleList = Ext.extend(Ext.grid.GridPanel,{});
//初始化store
var myArticleList = Ext.extend(Ext.grid.GridPanel,{
        initComponent:function(){
            myArticleList.superclass.initComponent.call(this);
            this.store = new Ext.data.JsonStore({
                fields:['asdf'],
                url:'www.google.com'
            });
        }
    });可以在initComponent中初始化需要的属性，但是重载这个函数一定要记得执行原函数，否则初始化不正确，

myArticleList.superclass.initComponent.call(this);其他就简单了，在里面写上想要的东西，分页、工具条、事件。。。

另外还有个方法就是重载constructor方法,大多数组件的构造函数需要一个config对象，记得在构造函数中写上：

var myArticleList = Ext.extend(Ext.grid.GridPanel,{
constructor:function(config){

Ext.apply(this,config);//将目标config配置赋值给当前组件，有相同的情况下，config中的属性覆盖了this中的，如果做到不覆盖，则用Ext.applyif();

myArticleList.superclass.constructor.call(this);

。。。。。。

}