基于ExtJS的汽车租赁系统的设计与实现

2014-03-26王莉利高新成王蔚龙

陕西理工大学学报(自然科学版) 2014年2期

王莉利, 高新成, 王蔚龙

(1.东北石油大学计算机与信息技术学院，黑龙江大庆 163318;2.东北石油大学现代教育技术中心，黑龙江大庆 163318)

0 引言

网络的普及与发展推动了软件开发技术和模式的变革，然而传统的汽车租赁公司却仍然采用纸质记录数据，导致公司的办公效率大大的降低，同时也无法满足数据的永久性存储。目前普遍的办公系统采用Javascript配合Jquery来控制前台的客户体验，这种方法不利于控制开发的成本，而且经常在浏览器上出现严重的兼容性问题，影响了客户体验效果[1]。在采用ExtJS技术优化系统结构的基础上，设计并开发了一套汽车租赁管理系统，将汽车管理业务分类整合，达到了业务集中管理的效果。

1 ExtJS组件介绍

ExtJS组件主要是指HTML标签表现出来的区域，它能够让静态标签转换成有着生命周期的动态组件，组件本身不是分散的结构集，在架构设计上主要采用集成方式紧密关联的倒树结构[2]。ExtJS组件结构如图1所示[3]。

ExtJS中所有组件的基类是指分层抽象出组件的共性Ext.Component，包括的子类都会自动拥有标准ExtJS组件所带的生命周期，其中包括渲染的创建和销毁，同时支持标准的启动、禁用、隐藏和显示等操作。ExtJS中所有组件都会有一个被指定的type属性值，定义一个指定类型的组件或者一个组件的类型是通过这个值得到。利用ExtJS技术可以把数据和组件进行解耦，在设计用户界面时就不用考虑各种形式的数据了，操作数据通过统一的数据接口来处理，可见ExtJS与后台技术没有什么关系，可以方便地把它运用在各种语言的开发应用中[4]。

2 系统功能设计与关键技术实现

2.1 系统功能模块介绍

系统在设计过程中考虑到汽车租赁公司业务管理需求，主要功能包括系统管理、车辆管理、系统用户管理、车辆配件管理、驾驶员管理、查询和统计等功能模块。系统功能模块如图2所示。

图1 ExtJS组件结构

图2 汽车租赁系统功能模块图

2.2 ExtJS数据存储与传输的研究设计与实现

在系统中所有的数据传输方式均是采用ExtJS的数据传递方式，ExtJS提供了JsonReader、XmlReader和ArrayReader三种数据解析方式[5]。ExtJS定义数据代理基类Ext.data.DataProxy，在DataProxy的基础，通过Ext.data.MemoryProxy、Ext.data.HttpProxy和Ext.data.ScriptTagProxy三种方式读取服务器端的数据及从跨域服务器中读取数据，其中Httpproxy使用HTTP协议通过Ajax获取后台数据。代码如下：

var cellClick = function (grid, rowIndex, columnIndex, e) {

record = grid.getStore().getAt(rowIndex), // Get the Record

columnId = grid.getColumnModel().getColumnId(columnIndex)}; // Get column id

通过输入绑定组件的id值grid和当前行的索引值rowIndex，以及当前列的索引值columnIndex调用Ajax方法，获取对应的记录,ExtJS框架会自动的调用内部的机制DataProxy类，通过JsonReader的方式将获取到的数据通过Json流的形式，并解析出来最终显示给客户界面。

2.3 ExtJS组件自定义事件技术的研究与实现

系统的所有组件事件的定义都是采用Ext的自定义事件，这些自定义事件一般和组件相关，要求用户根据组件的状态来进行触发，ExtJS中遵循一种树状的事件模型，同时为这些事件配置监听器，当某个事件被触发时自动调用对应的监听器[6]。ExtJS中的组件添加事件方法如下：

①为eventCmP添加Click事件：eventCmp.addEvents(“click”)；传入参数为要添加的事件名称。

②为eventCmP添加事件监听器：eventCmp.on(“click”，fn)；这里的on()是addLiStener()的简写形式，第一个参数表示传入事件名称，第二个参数表示事件发生的执行函数。

③触发eventCmP的事件：eventCmp.fireEvent(“click”，“params”)；fireEvent是强迫触发组件的事件，开始传入事件名称,如果有其它参数，补充到后面。

2.4 多权限化管理的设计与实现

系统在多权限化管理设计中，采用了页面生命周期的技术来实现。用户在访问任何页面时都会在初始化该页面过程中，通过Web.config中注册的信息找到权限类，在该类中，先访问Init方法，同时关注Http的传输过程，在HttpModule实现过程中主要运用Init阶段来激发权限检测事件。实现自定义HttpModule类FrameWorkPermission的关键代码如下：

public class FrameWorkPermission : IHttpModule

public void Init(HttpApplication app){

app.AcquireRequestState += new EventHandler(app_Auth); //处理检测权限事件}

public void Dispose()

{ // 释放 }

在以上代码中，权限检测是通过EventHandler事件激发了自定义app_Auth方法来实现的。