基于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