《Extjs教程_第八章_Tree(树)》由会员分享，可在线阅读，更多相关《Extjs教程_第八章_Tree(树)（18页珍藏版）》请在金锄头文库上搜索。
1、第八章 Tree(树)层级数据是很多开发者所熟知的。“根-枝-叶”的结构是很多用户界面的最基本的特征。windows的资源管理器中就展示了一个包含子节点、父节点和更深层次节点的树，以此来展示文件夹和文件的层级关系。Ext.tree允许开发者只通过使用几行代码就展示出这样的层级数据，并且提供了大量的简单的配置来适应更广泛的需求。虽然ExtJS默认的tree节点是file和folder图标样式，但是它不会仅仅将树局限于文件系统这一概念里。每一项的图标和文字，或者树中的节点，都可以根据动态或者静态的数据来改变不需要自己写代码。想想，我们如果希望建立一个用户组，为每个用户展示它们自己的图标；又或者希望
2、展示一画廊的图片并且在图标中预览这些图片。ExtJS可以帮助我们实现这些愿望，而且十分简单。种植未来：（作者使用培育植物的过程形象化地比喻建立tree的过程）ExtJS的tree不会关心你显示什么样的数据，因为它可以随心所欲地处理任何你碰到情况。数据可以实现就加载好，又或者从逻辑上进行分割。你可以直接在tree中编辑数据，改变标签和位置，或者你可以修改整棵树的样子以及每个节点的外观，一切都为了用户体验。ExtJS的tree是从Component模型上建立起来的。Component是真个ExtJS框架的基础。也就是说，开发者从熟悉的Component的系统中获得了便利，因为用户能偶得到一种统一的
3、和集成的体验效果。你同样可以保证tree和应用中的其他组件天衣无缝地工作在一起。从小种子开始：在这章里，你可以看到如何使用很少的代码建立一棵树。我们还将讨论利用唯一的数据结构来产生一个tree，以及如何使用数据可以让你操控重要的配置项。ExtJS树提供了很多高级支持，例如排序、拖拽等。但是，如果你想要真的定制一棵，我们还需要探索如何重写或者扩展configure options(配置项目)、methods(方法)、events(事件)的方法。tree是通过实例化Ext.tree.TreePanel类来建立的，它包含了很多Ext.tree.TreeNodes的节点类。这两个类是ExtJS树的核心
4、，也是我们这章讨论的主题。但是，还有很多其他先关的类需要介绍，我们现在列出Ext.tree包中的全部条目：AsyncTreeNode允许子节点异步加载的节点DefaultSelectionModel标准的TreePanel的单选模式MultiSelectionModel允许多选节点的选择模式RootTreeNodeUI作为TreePanel根的特殊的TreeNodeTreeDragZone为TreeNode的抓起提供支持TreeDropZone为TreeNode的放下提供支持TreeEditor允许节点标签被编辑TreeFilter对TreePanel中子节点的过滤进行支持TreeLoader
5、从指定的URL生成TreePanelTreeNode在TreePanel中显示节点的最主要的类TreeNodeUI为TreeNode提供最基本的界面TreePanel树状结构显示数据最主要的树类TreeSorter支持TreePanel中节点的排序天啊！幸运的是，你不用同时全部使用它们。TreeNode和TreePanel提供了最基础的东西，其它的类是用来提供额外功能的。我们将一个一个对其介绍，讨论如何使用它们并且展示几个练习示例。我们的第一个幼苗：现在，你可能还在思考ExtJS树带来的各种可能性，想亲手去干。尽管Ext.tree类包含了丰富的功能，但是你只需要几行代码就能让一切跑起来。在接下
6、来的例子中，我们假设你有一个准备好的空白HTML页面，包含了所有ExtJS所需要的引用。大部分的代码都基于以前的章节，好让我们抓住重点，你要孤立地看待它们。最好的方式是吧JS分别放在各个文件中并把代码放在Ext.onReady函数中。但是，你依然可以根据你自己的编码风格来处理。准备好土地：首先我们需要建立元素，用来向其渲染TreePanel。因此我们需要把它设置为我们想要的tree的大小：tree的JS代码可以分为三部分。首先，我们需要确定tree展现的方式。Ext.tree.TreeLoader类提供了这样的功能，现在我们采用最简单的办法来使用它：var treeLoader = new E
7、xt.tree.TreeLoader(dataUrl:http:/localhost/samplejson.php);dataUrl配置项说明了提供产生树所需要的JSON数据的脚本存在的位置。我现在不想讨论JSON的具体结构，让我们先保留这个问题。每个tree都需要一个根节点，它扮演了所有后裔的终极祖先的角色。为了建立root node（根节点），我们使用Ext.tree.AsyncTreeNode类：var rootNode = new Ext.tree.AsyncTreeNode(text: Root);之所以使用AsyncTreeNode而不是TreeNode，是因为我们需要从服务器端获
8、得节点，并且一层一层地去加载而不是一次性加载。N：AsyncTreeNode使用AJAX来保证用户不用花太多时间等待数据加载以及首次节点的渲染。最后，我们建立tree本身，利用Ext.tree.TreePanel类：var tree = new Ext.tree.TreePanel(renderTo:treecontainer,loader: treeLoader,root: rootNode);只需要把root node和TreeLoader放在配置中，再加上决定TreePanel渲染位置的renderTo配置，就可以显示tree了。再次提醒，你一定要记住把这些代码放在Ext.onReady
9、中，以此确定DOM在代码执行前已经准备好了。tree(树)离开data(数据)生长不了：我们看到，只需要十一行数据就可以显示如下的用户界面：我猜这还不够，但是这十一行代码提供了大量的功能。利用异步远程加载子节点，我们获得了统一的交互界面和体验。并不只是这么简单，因为我们将要介绍Ext树的最重要的部分data（数据）。JSON：标准的TreeLoader支持以一种特定的格式支持JSON数据包含node定义的数组，如下所示： id: 1, text: No Children, leaf: true , id: 2, text: Has Children,children: id: 3,text:
10、Youngster,leaf: truetext属性代表了tree里node的标签文本。id属性用来唯一标识一个node，并且将被用来决定选中和展开哪个节点。利用id属性我们可以使得TreePanel中高级功能的实现变的简单，这在之后会介绍到。children属性是可选的。leaf属性是被用来判断是否为叶子节点。在tree中leaf节点不能被展开，也不会有节点前卖弄的加号图标。ID简介：默认来说，TreeNode会被分配一个自动产生的ID，说明id配置可有可无。这个自动产生的id是一个字符串，形式如：ynode-xx，xx代表数字。id可以被用来获得一个你之前引用的节点。但是，你很可能自己分配
11、id。当你异步加载节点的时候，服务器脚本需要准确知道那个节点被点击从而传回其子节点数据。通过设置id，你可以发现在服务器端匹配节点变得很简单。额外的数据：虽然id、text和leaf属性十分常用，但是JSON的用途不只局限于此。事实上，任何TreeNode的配置都可以被JSON初始化，这是我们探索tree的高级功能的一个小技巧。你可以添加应用需要的特定的数据例如也许你的节点代表了产品并且你希望它们包含价格信息。任何属性都可以以TreeNode配置项的方式组织起来，并且包含在TreeNode的attributes属性之中。（也就是说，TreeNode本身没有的属性会被组织在attributes属
12、性之中）。XML：XML不是直接被tree支持的。但是你可以利用ExtJS的数据支持来让XML也能被读取。通常，使用JSON会让一切变得简单，虽然一些程序会使用XML传送数据。所以它值得我们讨论一下。我们可以使用Ext.data.HttpProxy来获得数据，但是我们需要在读取数据的时候把XML转换一下：var xmltree = new Ext.tree.TreePanel(el: treeContainer);var proxy = new Ext.data.HttpProxy(url:http:/localhost:81/ext/treexml.php);proxy.load(null,
13、 read: function(xmlDocument) parseXmlAndCreateNodes(xmlDocument);, function() xmltree.render(); );我们建立了一个新的TreePanel和HttpProxy，并且指定在proxy加载时使用Ext.data.Reader来处理进入的XML数据。我们接下来会告诉reader把XML传递到parseXmlAdnCreateNodes。在这个函数中，你可以根据XML数据来建立根节点和子节点，我们向它直接传递了一个XML文档。JS完全能够处理XML数据，虽然你可能更习惯于转换XHTML文档中DOM的方式。通过
14、读取XML文档你可以建立和使用textnodes（文本节点）。因为在这种方式里，你需要访问原始的XML节点，你可以完全地控制由此产生的tree和相应的树节点。照料你的树：我们将讨论使你的tree更加实用的功能。拖拽、排序和编辑节点。拖拽：当你使用TreePanel的时候，ExtJS管理着由拖拽产生的用户界面。只要添加enableDD: true配置到tree里，这时你可以通过拖拽重新组织树的节点，当显示绿色加号的时候，代表你可以向目标防止该节点。N：TreePanel不仅仅只会“照顾”它们自己的节点，当你的界面中有两棵树的时候，他们的节点可以在树之间相互拖拽。但这还没有完。当你刷新你的页面，所
15、有的节点又回到原位。因为TreePanel不会自动知道你是否需要保存改动，为了实现保存，我们需要借助一些事件（event）。TreePanel的beforemovenode事件在拖放的时候松开鼠标，但是在TreePanel反映变化前这一时间点触发。我们可以添加如下代码来告诉服务器移动节点这一事件：tree.on(beforemovenode, function(tree, node, oldParent, newParent, index) Ext.Ajax.request(url: http:/localhost/node-move.php,params: nodeid: node.id,newparentid: newParent.id,oldparentid: oldParent.id,dropindex: index););我们为beforemove
