基于ExtJS的通用层级关系组件的设计和实现
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
术 交流
基于 Ｅ ｘ ｌ 。 Ｊ Ｓ的通 用层级 关 系组件 的设 计 和 实现
周坤 中国海洋大学计 算机科学与技术 系
摘要： 本 文针对信息管理 系统中频繁 出现 的层级 关系管理 的需求， 设计并实现 了 层级 关系管理的通 用组件。 该通 用组件的设计思路 来源于 ｗ ｉ ｎ ｄ ｏ ｗ ｓ资 源管 理 器 对 文件 资 源 的 管理 。同 时，本 文使 用 了 Ｅ ｘ ｔ ｊ Ｓ ４ ． ２的 组件 技 术 对 该设 计 进 行 了实现 。 关 键词 ： 层 级关 系 通 用组件 Ｅ ｘ ｔ Ｊ Ｓ ４ ． ２
一
中，“ 层 级树 视 图” 组件 可 以对 应到 Ｅ ｘ ｔ ． ｔ ｒ ｅ ｅ ． Ｐ ａ ｎ ｅ ｌ ， 并 将 其扩 展 为
自定 义组件 “ Ｓ ｒ ｉ ｍｓ ．Ｃｏ ｍｐ ｏ ｎ ｅ ｎ ｔ ． ｔ ｒ ｅ ｅ ＶＪ ｅ ｗ”。
定的 层次 关 系， 而 这些 部 门的 层级 关 系有 时会 因为学 校 决 策而产
③“ 父容 器组 件” ： 上述 两个组件 需要 使用一 个父 容器 进行包 裹 。
一
从数 据 结构 的角度 分析上述 层级 关 系， 可 以将 该关 系描述 为 “ 层
例是 ｗｉ ｎ ｄ ｏ ｗｓ 操作 系统 的资源 管 理器 ， 如图 ２ 。 资源 管理 与 层级 关
般 来讲 ， 在Ｅ ｘ ｔ Ｊ Ｓ ４ ． ２ 的 开发 模式 下， 没 有特 殊功 能 的展现 父容
动 等操 作 。 受操 作系统 资源 管理 器的 启发 ， 本文 基于 Ｅ ｘ ｔ Ｊ Ｓ ４ ． ２的 信代 码 ， 避 免将 通信 部 分 的代 码 分散 到各 个 组件 中， 从 而降 低 了代
Ｔ ｒ ｅ ｅ Ｐ ａ ｎ ｅ ｌ ， 仿照 操 作系统 资源 管理 器 风格设 计前 端 界面设 计了用 码耦 合度 。 编码 之 后，“ 部 门—人员” 层 级关 系管理 组件 的最 终 界面如 图 ２
所示
于层 级树 管 理 的通 用模 块 。 由此一 来 ， Ｉ ＭＳ中所 有需 要管 理动 态 层
级 关 系的 模 块 ， 都可 以 方便 的扩展 这一通 用模 块 来实 现 统一界 面风
格的 模块 。
３通 用层级 关 系臂理 组件 的实 现
为实现 界 面的 设计 和丰 富的 交互 功 能， 本论文 选用 Ｅ ｘ ｔ Ｊ Ｓ ４ ． ２
一
④“ 辅助工具 栏” ： 父容 器的页头 部 分是 辅助工具 栏， 注意到 “ 辅
层 级树 视 图” 和 “ 子 结点 详细 列 表视 图” 两 个组件 结 点。 普通 文件 相 当于 层 级树 中的 叶 子结 点 。 各 级 文件 夹下 部 可能 助 工具 栏”可与 “ 存 在 一 般 文件 ， 即 层级树 的 各 级 中间结 点都 可以有叶 子 结 点。 文件 进 行交互 ， 此 时可 以将 其作 为 “ 父容 器组 件” 的 一个 ｔ ｂ ａ ｒ ， 附加 到父 夹 以及 文件 的新 建 、 删除、 移动 等操 作相 当于 结点的 创建 、 删除 、 移 容 器 中。 这 样做 的好 处 是 ： 可 以在 父容 器 中编 写与两 个 子容 器 的通
生 变化 。 随着发 展过 程 中职 能逐 渐变 多、 人 员逐渐 变多， 某 些部 门可
息 系统 中更新 其信息 。 与此 同时， 各级 部 门又有 其所属 的 员工， 员工 是 一个 复杂 的 多级 关系 ， 并且 需要动 态的 配置 。
２层 级关 系管理 组件 的设 计思 路
②“ 子结点列表视图” ： 使 用 鼠标 点 击 “ 层 级树 视 图”的 某 个 在Ｅ ｘ ｔ Ｊ Ｓ ４ ． ２中，“ 子 结 点 详 细 列 表视 图 ” 组件可以对应到 Ｅ ｘ ｔ ．
ｇｒ ｉ ｄＶｉ ｅ ｗ ”。
能 会将 部 分下 属部 门分离 出来 成为 新 的独 立部 门， 同时在 高 校的 信 中 间结 点， 可 以 激 活并 刷 新 右侧 的 “ 子 结点 详细 列表 视 图”部 分。 在 部 门之 间的 惆 配也 是 很常 见的现 象 。 显 然， 部 门之 间 的层 级关 系 ｇ ｒ ｉ ｄ ． Ｐ ａ ｎ ｅ ｌ ，并 将 其 扩 展 为 自 定 义 组 件 “ Ｓ ｒ ｉ ｍｓ ． Ｃ ｏ ｍｐ ｏ ｎ ｅ ｎ ｔ ．
Ｃｏｍ ｐｏ ｎｅ ｎｔ ． ｃ ｏ ｎｔ ａｉ ｎ ｅ ｒ ”。
级 树”结 构并 建 模 。 类似 层 级树 的 交互 式 可视 化 管理 方 面 ， 一 个 范 器 使 用 Ｅ ｘ ｔ ． ｐ ａ ｎ ｅ １ ． Ｐ ａ ｎ ｅ ｌ 来实 现 ， 并 将 扩 展 为 自定 义 组 件 “ Ｓ ｒ ｉ ｍｓ ． 系具 有 相 似性 ： 在资 源管 理 器 中， 目录 文件 相 当于 层级 树 中的 中 间
Байду номын сангаас中图法 分 类号： Ｔ Ｐ ３ ９ １
１问 墨 引 入
文献标 识 码： Ａ
各部分 的简要 描述 如 下： ①“ 层级树 视 图” ： 其主体部 分 包 含了当前层级 树中的所 有结点 ，
中间 结点 和叶 子 结 点。 为了使 这 三种 结点 的展 现 更 加 在信息 管理 系统 （ Ｉ ＭＳ ） 中， 数 据 之 间往 往具 有层级 关 系。 同时 包 括 根 结点 ， 这 些 层 级 关 系也 往 往具 有 动态 性特 点。 高 校信 息管理 系统 中的 “ 部 清 晰三 种 结点在实 现时可 以分 别使用 不同的 图标表 示 在 Ｅ ｘ ＵＳ ４ ． ２ 门一人 员” 管 理模 块 就 是 一个 典型 的 例子。 高校 的 部门 之间 往往有
作 为前 端 框 架， 开发 所 需 的通 用组 件。 Ｅ ｘ ｔ Ｊ Ｓ ４ ． ２在 组件 化 道 路上 已经 为开发者 们铺平 了道路 。 本文 在 Ｅ ｘ ｔ Ｊ Ｓ ４ ． ２的组件 系统基 础上 分 离 了最 小 组件。 仿 照 Ｗｉ ｎ ｄ ｏ ｗｓ 的 资源 管 理 器 风 格 ， 本 论 文将 前 端 界 面划 分 为 “ 层 级树 视 图” 部 分、“ 子结 点 列 表视 图”部 分和 “ 辅 助工具 栏 ” 部 分共 四个部 分。 本论文 设计了初步 的组件 结 构， 并 使用
基于 Ｅ ｘ ｌ 。 Ｊ Ｓ的通 用层级 关 系组件 的设 计 和 实现
周坤 中国海洋大学计 算机科学与技术 系
摘要： 本 文针对信息管理 系统中频繁 出现 的层级 关系管理 的需求， 设计并实现 了 层级 关系管理的通 用组件。 该通 用组件的设计思路 来源于 ｗ ｉ ｎ ｄ ｏ ｗ ｓ资 源管 理 器 对 文件 资 源 的 管理 。同 时，本 文使 用 了 Ｅ ｘ ｔ ｊ Ｓ ４ ． ２的 组件 技 术 对 该设 计 进 行 了实现 。 关 键词 ： 层 级关 系 通 用组件 Ｅ ｘ ｔ Ｊ Ｓ ４ ． ２
一
中，“ 层 级树 视 图” 组件 可 以对 应到 Ｅ ｘ ｔ ． ｔ ｒ ｅ ｅ ． Ｐ ａ ｎ ｅ ｌ ， 并 将 其扩 展 为
自定 义组件 “ Ｓ ｒ ｉ ｍｓ ．Ｃｏ ｍｐ ｏ ｎ ｅ ｎ ｔ ． ｔ ｒ ｅ ｅ ＶＪ ｅ ｗ”。
定的 层次 关 系， 而 这些 部 门的 层级 关 系有 时会 因为学 校 决 策而产
③“ 父容 器组 件” ： 上述 两个组件 需要 使用一 个父 容器 进行包 裹 。
一
从数 据 结构 的角度 分析上述 层级 关 系， 可 以将 该关 系描述 为 “ 层
例是 ｗｉ ｎ ｄ ｏ ｗｓ 操作 系统 的资源 管 理器 ， 如图 ２ 。 资源 管理 与 层级 关
般 来讲 ， 在Ｅ ｘ ｔ Ｊ Ｓ ４ ． ２ 的 开发 模式 下， 没 有特 殊功 能 的展现 父容
动 等操 作 。 受操 作系统 资源 管理 器的 启发 ， 本文 基于 Ｅ ｘ ｔ Ｊ Ｓ ４ ． ２的 信代 码 ， 避 免将 通信 部 分 的代 码 分散 到各 个 组件 中， 从 而降 低 了代
Ｔ ｒ ｅ ｅ Ｐ ａ ｎ ｅ ｌ ， 仿照 操 作系统 资源 管理 器 风格设 计前 端 界面设 计了用 码耦 合度 。 编码 之 后，“ 部 门—人员” 层 级关 系管理 组件 的最 终 界面如 图 ２
所示
于层 级树 管 理 的通 用模 块 。 由此一 来 ， Ｉ ＭＳ中所 有需 要管 理动 态 层
级 关 系的 模 块 ， 都可 以 方便 的扩展 这一通 用模 块 来实 现 统一界 面风
格的 模块 。
３通 用层级 关 系臂理 组件 的实 现
为实现 界 面的 设计 和丰 富的 交互 功 能， 本论文 选用 Ｅ ｘ ｔ Ｊ Ｓ ４ ． ２
一
④“ 辅助工具 栏” ： 父容 器的页头 部 分是 辅助工具 栏， 注意到 “ 辅
层 级树 视 图” 和 “ 子 结点 详细 列 表视 图” 两 个组件 结 点。 普通 文件 相 当于 层 级树 中的 叶 子结 点 。 各 级 文件 夹下 部 可能 助 工具 栏”可与 “ 存 在 一 般 文件 ， 即 层级树 的 各 级 中间结 点都 可以有叶 子 结 点。 文件 进 行交互 ， 此 时可 以将 其作 为 “ 父容 器组 件” 的 一个 ｔ ｂ ａ ｒ ， 附加 到父 夹 以及 文件 的新 建 、 删除、 移动 等操 作相 当于 结点的 创建 、 删除 、 移 容 器 中。 这 样做 的好 处 是 ： 可 以在 父容 器 中编 写与两 个 子容 器 的通
生 变化 。 随着发 展过 程 中职 能逐 渐变 多、 人 员逐渐 变多， 某 些部 门可
息 系统 中更新 其信息 。 与此 同时， 各级 部 门又有 其所属 的 员工， 员工 是 一个 复杂 的 多级 关系 ， 并且 需要动 态的 配置 。
２层 级关 系管理 组件 的设 计思 路
②“ 子结点列表视图” ： 使 用 鼠标 点 击 “ 层 级树 视 图”的 某 个 在Ｅ ｘ ｔ Ｊ Ｓ ４ ． ２中，“ 子 结 点 详 细 列 表视 图 ” 组件可以对应到 Ｅ ｘ ｔ ．
ｇｒ ｉ ｄＶｉ ｅ ｗ ”。
能 会将 部 分下 属部 门分离 出来 成为 新 的独 立部 门， 同时在 高 校的 信 中 间结 点， 可 以 激 活并 刷 新 右侧 的 “ 子 结点 详细 列表 视 图”部 分。 在 部 门之 间的 惆 配也 是 很常 见的现 象 。 显 然， 部 门之 间 的层 级关 系 ｇ ｒ ｉ ｄ ． Ｐ ａ ｎ ｅ ｌ ，并 将 其 扩 展 为 自 定 义 组 件 “ Ｓ ｒ ｉ ｍｓ ． Ｃ ｏ ｍｐ ｏ ｎ ｅ ｎ ｔ ．
Ｃｏｍ ｐｏ ｎｅ ｎｔ ． ｃ ｏ ｎｔ ａｉ ｎ ｅ ｒ ”。
级 树”结 构并 建 模 。 类似 层 级树 的 交互 式 可视 化 管理 方 面 ， 一 个 范 器 使 用 Ｅ ｘ ｔ ． ｐ ａ ｎ ｅ １ ． Ｐ ａ ｎ ｅ ｌ 来实 现 ， 并 将 扩 展 为 自定 义 组 件 “ Ｓ ｒ ｉ ｍｓ ． 系具 有 相 似性 ： 在资 源管 理 器 中， 目录 文件 相 当于 层级 树 中的 中 间
Байду номын сангаас中图法 分 类号： Ｔ Ｐ ３ ９ １
１问 墨 引 入
文献标 识 码： Ａ
各部分 的简要 描述 如 下： ①“ 层级树 视 图” ： 其主体部 分 包 含了当前层级 树中的所 有结点 ，
中间 结点 和叶 子 结 点。 为了使 这 三种 结点 的展 现 更 加 在信息 管理 系统 （ Ｉ ＭＳ ） 中， 数 据 之 间往 往具 有层级 关 系。 同时 包 括 根 结点 ， 这 些 层 级 关 系也 往 往具 有 动态 性特 点。 高 校信 息管理 系统 中的 “ 部 清 晰三 种 结点在实 现时可 以分 别使用 不同的 图标表 示 在 Ｅ ｘ ＵＳ ４ ． ２ 门一人 员” 管 理模 块 就 是 一个 典型 的 例子。 高校 的 部门 之间 往往有
作 为前 端 框 架， 开发 所 需 的通 用组 件。 Ｅ ｘ ｔ Ｊ Ｓ ４ ． ２在 组件 化 道 路上 已经 为开发者 们铺平 了道路 。 本文 在 Ｅ ｘ ｔ Ｊ Ｓ ４ ． ２的组件 系统基 础上 分 离 了最 小 组件。 仿 照 Ｗｉ ｎ ｄ ｏ ｗｓ 的 资源 管 理 器 风 格 ， 本 论 文将 前 端 界 面划 分 为 “ 层 级树 视 图” 部 分、“ 子结 点 列 表视 图”部 分和 “ 辅 助工具 栏 ” 部 分共 四个部 分。 本论文 设计了初步 的组件 结 构， 并 使用