Ext JS 自定义控件：initComponent与constructor的扩展

"这篇资料主要介绍了如何在Ext框架下实现自定义控件，重点讨论了两种扩展方法：重载`initComponent`函数和重载`constructor`方法。这两种方法都是为了在EXT环境中创建个性化的组件，例如自定义的GridPanel。" 在Ext JS中，自定义控件是一个常见的需求，以便满足特定的界面或功能需求。本文提到的两种方法是实现这一目标的核心途径。 1. 重载`initComponent`函数 `initComponent`是Ext JS组件生命周期中的一个重要方法，它用于初始化组件的基本配置。当你需要在组件创建时添加额外的配置或者进行一些特殊的设置时，可以重载这个方法。以下是一个简单的例子： ```javascript var myArticleList = Ext.extend(Ext.grid.GridPanel, { initComponent: function() { myArticleList.superclass.initComponent.call(this); // 执行父类的initComponent，确保组件的正常初始化 this.store = new Ext.data.JsonStore({ fields: ['asdf'], url: 'www.google.com' }); // 其他初始化操作，如分页、工具条、事件绑定等 } }); ``` 在这个例子中，我们创建了一个新的GridPanel子类，并在`initComponent`中设置了JsonStore作为数据源。调用`myArticleList.superclass.initComponent.call(this)`确保了父类的初始化过程不会被忽略，这是重载此类方法的关键。 2. 重载`constructor`函数 另一种扩展组件的方式是通过重载`constructor`函数。`constructor`是每个类实例化时会调用的方法，通常用于接收配置对象（config object）并应用到组件实例上。下面是一个示例： ```javascript var myArticleList = Ext.extend(Ext.grid.GridPanel, { constructor: function(config) { Ext.apply(this, config); // 将config对象的属性应用到当前组件实例 myArticleList.superclass.constructor.call(this); // 在这里可以进行其他初始化操作 } }); ``` `Ext.apply`函数用于将配置对象的属性合并到当前对象，如果有冲突，config中的属性会覆盖已有属性。`myArticleList.superclass.constructor.call(this)`保证了父类的构造函数得以执行。 此外，自定义控件还可以涉及到事件的处理。在`constructor`中，你可以添加新的事件，比如： ```javascript this.addEvents('customEvent'); // 添加自定义事件'customEvent' ``` 然后在适当的地方触发这个事件： ```javascript this.fireEvent('customEvent', arg1, arg2); // 发布自定义事件，传递参数 ``` 通过以上两种方式，开发者可以根据需求扩展EXT控件，创建具有特定行为和外观的自定义组件，以适应各种复杂的用户界面场景。同时，自定义事件的机制使得这些组件能够与其他组件进行有效的通信，增强了系统的可扩展性和灵活性。