周珅 中國(guó)海洋大學(xué)計(jì)算機(jī)科學(xué)與技術(shù)系

基于ExtJS的通用層級(jí)關(guān)系組件的設(shè)計(jì)和實(shí)現(xiàn)

周珅 中國(guó)海洋大學(xué)計(jì)算機(jī)科學(xué)與技術(shù)系

本文針對(duì)信息管理系統(tǒng)中頻繁出現(xiàn)的層級(jí)關(guān)系管理的需求，設(shè)計(jì)并實(shí)現(xiàn)了層級(jí)關(guān)系管理的通用組件。該通用組件的設(shè)計(jì)思路來(lái)源于windows資源管理器對(duì)文件資源的管理。同時(shí)，本文使用了ExtJS 4.2的組件技術(shù)對(duì)該設(shè)計(jì)進(jìn)行了實(shí)現(xiàn)。

層級(jí)關(guān)系 通用組件 ExtJS 4.2

1 問(wèn)題引入

在信息管理系統(tǒng)（IMS）中，數(shù)據(jù)之間往往具有層級(jí)關(guān)系。同時(shí)這些層級(jí)關(guān)系也往往具有動(dòng)態(tài)性特點(diǎn)。高校信息管理系統(tǒng)中的“部門—人員”管理模塊就是一個(gè)典型的例子。高校的部門之間往往有一定的層次關(guān)系，而這些部門的層級(jí)關(guān)系有時(shí)會(huì)因?yàn)閷W(xué)校決策而產(chǎn)生變化。隨著發(fā)展過(guò)程中職能逐漸變多、人員逐漸變多，某些部門可能會(huì)將部分下屬部門分離出來(lái)成為新的獨(dú)立部門，同時(shí)在高校的信息系統(tǒng)中更新其信息。與此同時(shí)，各級(jí)部門又有其所屬的員工，員工在部門之間的調(diào)配也是很常見(jiàn)的現(xiàn)象。顯然，部門之間的層級(jí)關(guān)系是一個(gè)復(fù)雜的多級(jí)關(guān)系，并且需要?jiǎng)討B(tài)的配置。

2 層級(jí)關(guān)系管理組件的設(shè)計(jì)思路

從數(shù)據(jù)結(jié)構(gòu)的角度分析上述層級(jí)關(guān)系，可以將該關(guān)系描述為“層級(jí)樹(shù)”結(jié)構(gòu)并建模。類似層級(jí)樹(shù)的交互式可視化管理方面，一個(gè)范例是windows操作系統(tǒng)的資源管理器，如圖2。資源管理與層級(jí)關(guān)系具有相似性：在資源管理器中，目錄文件相當(dāng)于層級(jí)樹(shù)中的中間結(jié)點(diǎn)。普通文件相當(dāng)于層級(jí)樹(shù)中的葉子結(jié)點(diǎn)。各級(jí)文件夾下都可能存在一般文件，即層級(jí)樹(shù)的各級(jí)中間結(jié)點(diǎn)都可以有葉子結(jié)點(diǎn)。文件夾以及文件的新建、刪除、移動(dòng)等操作相當(dāng)于結(jié)點(diǎn)的創(chuàng)建、刪除、移動(dòng)等操作。受操作系統(tǒng)資源管理器的啟發(fā)，本文基于ExtJS 4．2的Tree Panel，仿照操作系統(tǒng)資源管理器風(fēng)格設(shè)計(jì)前端界面設(shè)計(jì)了用于層級(jí)樹(shù)管理的通用模塊。由此一來(lái)，IMS中所有需要管理動(dòng)態(tài)層級(jí)關(guān)系的模塊，都可以方便的擴(kuò)展這一通用模塊來(lái)實(shí)現(xiàn)統(tǒng)一界面風(fēng)格的模塊。

3 通用層級(jí)關(guān)系管理組件的實(shí)現(xiàn)

為實(shí)現(xiàn)界面的設(shè)計(jì)和豐富的交互功能，本論文選用ExtJS 4．2作為前端框架，開(kāi)發(fā)所需的通用組件。ExtJS 4．2在組件化道路上已經(jīng)為開(kāi)發(fā)者們鋪平了道路。本文在ExtJS 4．2的組件系統(tǒng)基礎(chǔ)上分離了最小組件。仿照Windows的資源管理器風(fēng)格，本論文將前端界面劃分為“層級(jí)樹(shù)視圖”部分、“子結(jié)點(diǎn)列表視圖”部分和“輔助工具欄”部分共四個(gè)部分。本論文設(shè)計(jì)了初步的組件結(jié)構(gòu)，并使用visio將該設(shè)計(jì)變成原型圖。如圖1所示。

圖1 通用層級(jí)樹(shù)組件前端界面設(shè)計(jì)

各部分的簡(jiǎn)要描述如下：

①“層級(jí)樹(shù)視圖”：其主體部分包含了當(dāng)前層級(jí)樹(shù)中的所有結(jié)點(diǎn)，包括根結(jié)點(diǎn)，中間結(jié)點(diǎn)和葉子結(jié)點(diǎn)。為了使這三種結(jié)點(diǎn)的展現(xiàn)更加清晰，三種結(jié)點(diǎn)在實(shí)現(xiàn)時(shí)可以分別使用不同的圖標(biāo)表示。在ExtJS 4．2中，“層級(jí)樹(shù)視圖”組件可以對(duì)應(yīng)到Ext．tree．Panel，并將其擴(kuò)展為自定義組件“Srims． Component．treeView”。

②“子結(jié)點(diǎn)列表視圖”：使用鼠標(biāo)點(diǎn)擊“層級(jí)樹(shù)視圖”的某個(gè)中間結(jié)點(diǎn)，可以激活并刷新右側(cè)的“子結(jié)點(diǎn)詳細(xì)列表視圖”部分。在ExtJS 4．2中，“子結(jié)點(diǎn)詳細(xì)列表視圖”組件可以對(duì)應(yīng)到Ext．grid．Panel，并將其擴(kuò)展為自定義組件“Srims．Component．gridView”。

③“父容器組件”：上述兩個(gè)組件需要使用一個(gè)父容器進(jìn)行包裹。一般來(lái)講，在ExtJS 4．2的開(kāi)發(fā)模式下，沒(méi)有特殊功能的展現(xiàn)父容器使用Ext．panel．Panel來(lái)實(shí)現(xiàn)，并將擴(kuò)展為自定義組件“Srims．Component．container”。

④“輔助工具欄”：父容器的頁(yè)頭部分是輔助工具欄，注意到“輔助工具欄”可與“層級(jí)樹(shù)視圖”和“子結(jié)點(diǎn)詳細(xì)列表視圖”兩個(gè)組件進(jìn)行交互，此時(shí)可以將其作為“父容器組件”的一個(gè)tbar，附加到父容器中。這樣做的好處是：可以在父容器中編寫與兩個(gè)子容器的通信代碼，避免將通信部分的代碼分散到各個(gè)組件中，從而降低了代碼耦合度。

編碼之后，“部門—人員”層級(jí)關(guān)系管理組件的最終界面如圖2所示。

圖2 “部門—人員”層級(jí)關(guān)系管理組件界面圖

4 結(jié)束語(yǔ)

基于ExtJS的組件化思想并仿照windows資源管理器風(fēng)格，本文對(duì)層級(jí)關(guān)系管理組件進(jìn)行了設(shè)計(jì)，將組件劃分為“層級(jí)樹(shù)視圖”、“子結(jié)點(diǎn)列表視圖”、“父容器組件”、“輔助工具欄”四個(gè)部分。該通用管理組件可以較好的方便用戶對(duì)層級(jí)關(guān)系進(jìn)行管理，有效提高信息管理的效率。

TP391

A