基于ExtJS的通用层级关系组件的设计和实现

周珅 中国海洋大学计算机科学与技术系

基于ExtJS的通用层级关系组件的设计和实现

周珅 中国海洋大学计算机科学与技术系

本文针对信息管理系统中频繁出现的层级关系管理的需求，设计并实现了层级关系管理的通用组件。该通用组件的设计思路来源于windows资源管理器对文件资源的管理。同时，本文使用了ExtJS 4.2的组件技术对该设计进行了实现。

层级关系 通用组件 ExtJS 4.2

1 问题引入

在信息管理系统（IMS）中，数据之间往往具有层级关系。同时这些层级关系也往往具有动态性特点。高校信息管理系统中的“部门—人员”管理模块就是一个典型的例子。高校的部门之间往往有一定的层次关系，而这些部门的层级关系有时会因为学校决策而产生变化。随着发展过程中职能逐渐变多、人员逐渐变多，某些部门可能会将部分下属部门分离出来成为新的独立部门，同时在高校的信息系统中更新其信息。与此同时，各级部门又有其所属的员工，员工在部门之间的调配也是很常见的现象。显然，部门之间的层级关系是一个复杂的多级关系，并且需要动态的配置。

2 层级关系管理组件的设计思路

从数据结构的角度分析上述层级关系，可以将该关系描述为“层级树”结构并建模。类似层级树的交互式可视化管理方面，一个范例是windows操作系统的资源管理器，如图2。资源管理与层级关系具有相似性：在资源管理器中，目录文件相当于层级树中的中间结点。普通文件相当于层级树中的叶子结点。各级文件夹下都可能存在一般文件，即层级树的各级中间结点都可以有叶子结点。文件夹以及文件的新建、删除、移动等操作相当于结点的创建、删除、移动等操作。受操作系统资源管理器的启发，本文基于ExtJS 4．2的Tree Panel，仿照操作系统资源管理器风格设计前端界面设计了用于层级树管理的通用模块。由此一来，IMS中所有需要管理动态层级关系的模块，都可以方便的扩展这一通用模块来实现统一界面风格的模块。

3 通用层级关系管理组件的实现

为实现界面的设计和丰富的交互功能，本论文选用ExtJS 4．2作为前端框架，开发所需的通用组件。ExtJS 4．2在组件化道路上已经为开发者们铺平了道路。本文在ExtJS 4．2的组件系统基础上分离了最小组件。仿照Windows的资源管理器风格，本论文将前端界面划分为“层级树视图”部分、“子结点列表视图”部分和“辅助工具栏”部分共四个部分。本论文设计了初步的组件结构，并使用visio将该设计变成原型图。如图1所示。

图1 通用层级树组件前端界面设计

各部分的简要描述如下：

①“层级树视图”：其主体部分包含了当前层级树中的所有结点，包括根结点，中间结点和叶子结点。为了使这三种结点的展现更加清晰，三种结点在实现时可以分别使用不同的图标表示。在ExtJS 4．2中，“层级树视图”组件可以对应到Ext．tree．Panel，并将其扩展为自定义组件“Srims． Component．treeView”。

②“子结点列表视图”：使用鼠标点击“层级树视图”的某个中间结点，可以激活并刷新右侧的“子结点详细列表视图”部分。在ExtJS 4．2中，“子结点详细列表视图”组件可以对应到Ext．grid．Panel，并将其扩展为自定义组件“Srims．Component．gridView”。

③“父容器组件”：上述两个组件需要使用一个父容器进行包裹。一般来讲，在ExtJS 4．2的开发模式下，没有特殊功能的展现父容器使用Ext．panel．Panel来实现，并将扩展为自定义组件“Srims．Component．container”。

④“辅助工具栏”：父容器的页头部分是辅助工具栏，注意到“辅助工具栏”可与“层级树视图”和“子结点详细列表视图”两个组件进行交互，此时可以将其作为“父容器组件”的一个tbar，附加到父容器中。这样做的好处是：可以在父容器中编写与两个子容器的通信代码，避免将通信部分的代码分散到各个组件中，从而降低了代码耦合度。

编码之后，“部门—人员”层级关系管理组件的最终界面如图2所示。

图2 “部门—人员”层级关系管理组件界面图

4 结束语

基于ExtJS的组件化思想并仿照windows资源管理器风格，本文对层级关系管理组件进行了设计，将组件划分为“层级树视图”、“子结点列表视图”、“父容器组件”、“辅助工具栏”四个部分。该通用管理组件可以较好的方便用户对层级关系进行管理，有效提高信息管理的效率。

TP391

A