Extjs教程第八章Tree(树).docVIP

第八章 Tree(树) 层级数据是很多开发者所熟知的。“根-枝-叶”的结构是很多用户界面的最基本的特征。windows的资源管理器中就展示了一个包含子节点、父节点和更深层次节点的树，以此来展示文件夹和文件的层级关系。Ext.tree允许开发者只通过使用几行代码就展示出这样的层级数据，并且提供了大量的简单的配置来适应更广泛的需求。 虽然ExtJS默认的tree节点是file和folder图标样式，但是它不会仅仅将树局限于文件系统这一概念里。每一项的图标和文字，或者树中的节点，都可以根据动态或者静态的数据来改变——不需要自己写代码。想想，我们如果希望建立一个用户组，为每个用户展示它们自己的图标；又或者希望展示一画廊的图片并且在图标中预览这些图片。ExtJS可以帮助我们实现这些愿望，而且十分简单。 种植未来：（作者使用培育植物的过程形象化地比喻建立tree的过程） ExtJS的tree不会关心你显示什么样的数据，因为它可以随心所欲地处理任何你碰到情况。数据可以实现就加载好，又或者从逻辑上进行分割。你可以直接在tree中编辑数据，改变标签和位置，或者你可以修改整棵树的样子以及每个节点的外观，一切都为了用户体验。 ExtJS的tree是从Component模型上建立起来的。Component是真个ExtJS框架的基础。也就是说，开发者从熟悉的Component的系统中获得了便利，因为用户能偶得到一种统一的和集成的体验效果。你同样可以保证tree和应用中的其他组件天衣无缝地工作在一起。 从小种子开始： 在这章里，你可以看到如何使用很少的代码建立一棵树。我们还将讨论利用唯一的数据结构来产生一个tree，以及如何使用数据可以让你操控重要的配置项。ExtJS树提供了很多高级支持，例如排序、拖拽等。但是，如果你想要真的定制一棵，我们还需要探索如何重写或者扩展configure options(配置项目)、methods(方法)、events(事件)的方法。 tree是通过实例化Ext.tree.TreePanel类来建立的，它包含了很多Ext.tree.TreeNodes的节点类。这两个类是ExtJS树的核心，也是我们这章讨论的主题。但是，还有很多其他先关的类需要介绍，我们现在列出Ext.tree包中的全部条目： AsyncTreeNode 允许子节点异步加载的节点 DefaultSelectionModel 标准的TreePanel的单选模式 MultiSelectionModel 允许多选节点的选择模式 RootTreeNodeUI 作为TreePanel根的特殊的TreeNode TreeDragZone 为TreeNode的抓起提供支持 TreeDropZone 为TreeNode的放下提供支持 TreeEditor 允许节点标签被编辑 TreeFilter 对TreePanel中子节点的过滤进行支持 TreeLoader 从指定的URL生成TreePanel TreeNode 在TreePanel中显示节点的最主要的类 TreeNodeUI 为TreeNode提供最基本的界面 TreePanel 树状结构显示数据——最主要的树类 TreeSorter 支持TreePanel中节点的排序 天啊！幸运的是，你不用同时全部使用它们。TreeNode和TreePanel提供了最基础的东西，其它的类是用来提供额外功能的。我们将一个一个对其介绍，讨论如何使用它们并且展示几个练习示例。 我们的第一个幼苗： 现在，你可能还在思考ExtJS树带来的各种可能性，想亲手去干。尽管Ext.tree类包含了丰富的功能，但是你只需要几行代码就能让一切跑起来。 在接下来的例子中，我们假设你有一个准备好的空白HTML页面，包含了所有ExtJS所需要的引用。大部分的代码都基于以前的章节，好让我们抓住重点，你要孤立地看待它们。最好的方式是吧JS分别放在各个文件中并把代码放在Ext.onReady函数中。但是，你依然可以根据你自己的编码风格来处理。 准备好土地： 首先我们需要建立div元素，用来向其渲染TreePanel。因此我们需要把它设置为我们想要的tree的大小： div id=treecontainer style=height:300px; width:200px;/div tree的JS代码可以分为三部分。首先，我们需要确定tree展现的方式。Ext.tree.TreeLoader类提供了这样的功能，现在我们采用最简单的办法来使用它： var treeLoader = new Ext.tree.TreeLoader({ dataUrl:http://localhost/samplejson.php }); dataUrl配置项说明了提