EXTJS组件化浅谈

什么是Extjs？

ExtJS主要用来开发RIA富客户端的AJAX应用，主要用于创建前端用户界面，与后台技术无关的前端AJAX框架。因此，可以把ExtJS用在.Net、Java、PHP等各种开发语言开发的应用中。ExtJs最开始基于YUI技术，通过参考JavaSwing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。

组件化编程：是将各种小部件组装成一个对象，并提供相应的事件和函数，供别人方便的调用。

Extjs本身具有极强的扩展性，它允许用户在其基础上编写更适合自身业务需要的自定义组件，因此学习如何为EXT编写扩展组件是学习EXT非常重要的事情。我们可以将实际开发中常用的功能封装为自定义组件，下次再遇到类似的功能时就可以直接拿来使用，不必重复编写代码。

在实际动手编写自己定制的用户扩展之前，首先要了解一些基础知识。只有了解这些知识之后才能开始了解这些用户扩展组件是如何运作的，同时对EXT中的组件结构有了更加深入的了解，有助于对EXT进行更深一步的理解和研究。

继承模型

EXT中的扩展组件是建立在面向对象开发的基础上的，所有扩展都是基于EXT已经封装好的父类进行功能的扩展。EXT利用Ext.extend()函数来实现类之间的继承和操作。这是一个自动执行的函数，它会在EXT被加载的同时执行，在其执行过程中会使用闭包构造出继承所需的局部变量。Ext.extend()函数实际上支持3个函数。例如：

Ext.extend(com.ruanko.PackageSettingButton,Ext.Button,{});

第一个表示等待继承的子类，第二个表示超类，第三个表示继承过程中需要覆盖的属性与函数。

上述继承实例还可以写成如下形式：

com.ruanko.PackageSettingButton = Ext.extend(Ext.Button,{});

Component的生命周期

Ext中的所有组件都是继承Ext.Component，需要掌握Ext.Component的几个重要生命周期才能准确找到扩展点，实现对这类组件的扩展。

当我们创建一个Ext.Component组件时，会按照以下顺序对组件进行初始化：

1. 调用Ext.Apply()复制参数；
2. 调用addEvents()添加事件；
3. 调用Ext.ComponentMgr.register(this)注册当前组件；
4. 调用initComponent()初始化组件；
5. 调用initPlugin()初始化组件；
6. 调用initState()初始化状态；
7. 调用applyToMarkup()或render()进行组件渲染。

一般情况下在继承了基于Ext.Component组件之后，对组件的初始化操作都可以直接写在initComponent()里，它会在组件初始化前被自动调用。

编写用户扩展

这里以点击设置套餐按钮为例，弹出设置套餐窗口。效果图如下图所示：

代码如下：

Ext.namespace('com.ruanko'); com.ruanko.PackageSettingButton = Ext.extend(Ext.Button,{ …… createWindow：function(){ var win = new Ext.Window({ id:'settingWindow', title:'设置套餐', height:300, width:350, closeAction:'close', plain:true, modal:true, items:[this.createPanel()], buttonAlign:'center', buttons:[ new Ext.Button({text:'确定',handler:this.hrSettingPackage.createDelegate(this)}), new Ext.Button({text:'取消',handler:function(){Ext.getCmp('settingWindow').close();}}) ] }); return win; }, initComponent:function(){ this.text = '设置套餐'; this.iconCls = 'company_edit'; this.handler = function(){ this.gridPanel = Ext.getCmp(this.panelId); this.records = this.gridPanel.getSelectionModel().getSelections(); if (this.records.length <= 0) { Ext.Msg.alert('警告', '请选择要设置套餐的对象'); } else { win = this.createWindow(); win.show(); } } com.ruanko.PackageSettingButton.superclass.initComponent.call(this); } });

本例子是在Ext.Toolbar中实例出来的。

com.ruanko.PackageSettingButton({panelId: panelId,url: url });

panleId为选中的GridPanelId，为获取选中行的对象，url为保存的链接。

现在知道编写自定义用户扩展组件是一件多么简单的事情了。我们需要任何功能都可以直接通过扩展已有的组件实现出来，而且这些功能已经封装在自定义组件中，其后就可以直接调用它们，无需重复这些工作了。这里通过传不同用户类型的panleId和保存的url过去就可以实现重复利用了。

小结

组件是ExtJS的基础，合理的编写自定义组件会给ExtJS编码过程中带来极大的便利，提高效率。