如何使用Ext框架实现无级树结构.docxVIP

（作 者 ： 王 国 全 ）TreeNode 定 义 。如 何 使 用 Ext 框架实现无级树结构 在实际网页开发中 ，经 常 会 需 要以树型结构来显示数 据 ， 如选择居住地所 在 的 区 域 。 传统方法是使用 JavaScript 编 写 代 码 ， 不论数据来源是 XML 文件还是数据库 ， 创 建 良 好 效 果 的 Js 代码都是非常复杂的事情 。下面介绍如何使用 Ext 构建一个无级树结构 。1. Ext 框 架 简 介ExtJS 是 一 个 Ajax 框 架 ， 是 一 个 用 Javascript 写 的 ， 用 于 在客户端创建丰富多彩的 Web 应 用 程 序 界 面 。 ExtJS 可 以 用 来 开 发 RIA 也即富客户端的 Ajax 应 用 。使 用 Ext 框架需要引用以下文件 ：（1） CSS 样 式 文 件sources/css/ext-all.css /（2） Ext 框 架说 明 ： ext-all.js 包 含 了 所 有 的 Ext 代 码 ， 代 码 比 较 大 。 如果只用到了部分功能 ， 只可以包含分离的单独文件 。2. 数 据 库 设 计为了显示层次关系 ， 数 据 库 按 图 1 设 计 ，表示父区域的编号 。其 中 parent_id说 明:（1） 将 代 码 写 在 Ext.onReady (function (){…} ) ;中 可 以 使 Ext 的 Js 代码全部载入后再执行其中的代码 。（2） Tree 必须有一个根 节 点 （通常根节点不显示 ）。 如 果 手 工 方 式 创 建 TreeNode， 则 使 用 appendChild 方法添加到其他 节 点 下 。（3） 树 加 载 器 （Ext.tree.TreeLoader） 的 目 的 是 从 URL 延 迟 加 载 树 节 点 Ext.tree.TreeNode 的 子 节 点 。 返 回 值 必 须 是 JSON 格式的的树节点 。 如 下 面 的 JSON 格 式 的 数 据 ：图 1数 据 表 设 计3. 客 户 端 代 码Ext 将 所 有 的组件都编写成了 Javascript 类 。Tree， 实际上就是创建与 Tree 相 关 的 对 象 。创 建 一 个一 个 最 简 单 的 Tree 应 是 由 TreePanel 和 TreeNode 组 成 。 在ExtJS 中 ， 不管是叶子节点还是非叶子节点 ， 都 统 一 用 TreeN-ode 表表示树的节点 。 有两种类型的树节点可以使用 。 一 种 节2010. 790script type = text/javascript src = ../../adapter/ext/ext-base.js /scriptscript type= text/javascript src= ../../ext-all.js /scriptlink rel = stylesheet type = text/css href = ../../re-script type= text/javascript Ext.onReady (function (){loadTree () ;}) ;// 创建 Tree 的函数function loadTree (){// 创建一个 id 为 “root” 的根节点。 设置根节点为：//不允许拖动var root = new Ext.tree.AsyncTreeNode ({text: 区域选择 , draggable:false, id:root}) ;// 创建一个 TreePanel 对象var tree = new Ext.tree.TreePanel ({animate:true, autoScroll:true,loader: new Ext.tree.TreeLoader ( { dataUrl::81/services/area.php}) , enableDD:true, containerScroll: true,border: true, frame:true, header:true,dropConfig: {appendOnly:true}}) ;/* 设置点击事件 */tree.on (click,function (node) {alert ( 我 是 ： +node.text+ ， 我 的 id 是 ： +node.id+ ) ;}) ;tree.setRootNode (root) ; //设置 root 节点为根节