Extjs教程__Tree(树)..doc
《Extjs教程__Tree(树)..doc》由会员分享,可在线阅读,更多相关《Extjs教程__Tree(树)..doc(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中子节点的过滤进行支持TreeLoade
5、r从指定的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
7、Ext.tree.TreeLoader(dataUrl: :/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: Youngs
10、ter,leaf: truetext属性代表了tree里node的标签文本。id属性用来唯一标识一个node,并且将被用来决定选中和展开哪个节点。利用id属性我们可以使得TreePanel中高级功能的实现变的简单,这在之后会介绍到。children属性是可选的。leaf属性是被用来判断是否为叶子节点。在tree中leaf节点不能被展开,也不会有节点前卖弄的加号图标。ID简介:默认来说,TreeNode会被分配一个自动产生的ID,说明id配置可有可无。这个自动产生的id是一个字符串,形式如:ynode-xx,xx代表数字。id可以被用来获得一个你之前引用的节点。但是,你很可能自己分配id。当你异
11、步加载节点的时候,效劳器脚本需要准确知道那个节点被点击从而传回其子节点数据。通过设置id,你可以发现在效劳器端匹配节点变得很简单。额外的数据:虽然id、text和leaf属性十分常用,但是JSON的用途不只局限于此。事实上,任何TreeNode的配置都可以被JSON初始化,这是我们探索tree的高级功能的一个小技巧。你可以添加应用需要的特定的数据例如也许你的节点代表了产品并且你希望它们包含价格信息。任何属性都可以以TreeNode配置项的方式组织起来,并且包含在TreeNode的attributes属性之中。也就是说,TreeNode本身没有的属性会被组织在attributes属性之中。XML
12、:XML不是直接被tree支持的。但是你可以利用ExtJS的数据支持来让XML也能被读取。通常,使用JSON会让一切变得简单,虽然一些程序会使用XML传送数据。所以它值得我们讨论一下。我们可以使用Ext.data. Proxy来获得数据,但是我们需要在读取数据的时候把XML转换一下:var xmltree = new Ext.tree.TreePanel(el: treeContainer);var proxy = new Ext.data. Proxy(url: :/localhost:81/ext/treexml.php);proxy.load(null, read: function(x
13、mlDocument) parseXmlAndCreateNodes(xmlDocument);, function() xmltree.render(); );我们建立了一个新的TreePanel和 Proxy,并且指定在proxy加载时使用Ext.data.Reader来处理进入的XML数据。我们接下来会告诉reader把XML传递到parseXmlAdnCreateNodes。在这个函数中,你可以根据XML数据来建立根节点和子节点,我们向它直接传递了一个XML文档。JS完全能够处理XML数据,虽然你可能更习惯于转换XHTML文档中DOM的方式。通过读取XML文档你可以建立和使用textn
14、odes文本节点。因为在这种方式里,你需要访问原始的XML节点,你可以完全地控制由此产生的tree和相应的树节点。照料你的树:我们将讨论使你的tree更加实用的功能。拖拽、排序和编辑节点。拖拽:当你使用TreePanel的时候,ExtJS管理着由拖拽产生的用户界面。只要添加enableDD: true配置到tree里,这时你可以通过拖拽重新组织树的节点,当显示绿色加号的时候,代表你可以向目标防止该节点。N:TreePanel不仅仅只会“照顾它们自己的节点,当你的界面中有两棵树的时候,他们的节点可以在树之间相互拖拽。但这还没有完。当你刷新你的页面,所有的节点又回到原位。因为TreePanel不会
15、自动知道你是否需要保存改动,为了实现保存,我们需要借助一些事件event。TreePanel的beforemovenode事件在拖放的时候松开鼠标,但是在TreePanel反映变化前这一时间点触发。我们可以添加如下代码来告诉效劳器移动节点这一事件:tree.on(beforemovenode, function(tree, node, oldParent, newParent, index) Ext.Ajax.request(url: :/localhost/node-move.php,params: nodeid: node.id,newparentid: newParent.id,oldp
16、arentid: oldParent.id,dropindex: index););我们为beforemovenode事件添加了事件处理函数。这个函数在调用的时候向其传递了几个有用的参数:1, tree:该事件所发生的TreePanel;2, node:被移动的节点;3, oldParent:被移动节点之前的父节点;4, newParent:被移动节点的新的父节点;5, index:移动目的的序号。我们利用以上这些来形成AJAX对效劳器发请求时传递的参数。这样,你可以获得tree现在的任何信息和状态,你的效劳端脚本可据此以完成任何你需要的动作。在某些桩抗下,你可能需要取消拖放节点。当你在bef
17、oremovenode函数中出现了逻辑上的错误,你需要复原改动。如果你不发送AJAX请求,可以直接在函数的最后返回false即可,相应的动作将被取消。但是如果你采用了AJAX,就困难了许多,因为XML Request是异步发生的,而且这个事件函数会执行一些默认的动作,其中就包括允许节点移动。即然这样,你需要确定你为AJAX提供了failure函数的配置,向这个函数传递足够的参数,好让树复原到以前的状态。因为beforemovenode通过默认传递的参数提供了大量的信息,所以你可以传递必须的数据来对产生的错误进行管理。排序:我们可以通过一种灵活的方法为TreePanel排序TreeSorter。
18、在先前代码的根底上,我们可以建立一个如下的TreeSorter:new Ext.tree.TreeSorter(tree, folderSort: true,dir: “asc);因为TreeSorter采用了几个约定leaf节点由leaf属性标明并且标签文本在text属性里说明我们可以很容易地按字母进行排序。dir属性g奥素我们TreeSorter是按照升序还是降序进行排序的。folderSort为true默认为false说明叶子节点需要在非叶子节点下进行排序,也就是说,整个树每层都要进行排序。如果你的数据不仅仅是简单的文本,我们可以通过sortType配置项自定义排序。sortType的值
19、是一个函数,而且只向其传递一个参数:a TreeNode。sortType允许你为TreeNode新加自定义属性这个属性可能是效劳器传来的和业务相关的信息并且把它转化成Ext可以排序的格式,换句话说,也就是转化为标准的JS类型,如整型、字符串、日期。sortType一般用在原有的数据格式不能或者不方便做搜索以及排序的时候从效劳器返回的数据可能会被用于不同的目的,我们可以把日期转化为标准的格式从US样式的MM/DD/YY转化为YYYYMMDD样式以便排序或者我们要去掉货币中无用的符号从而转化为数字。sortType: function(node) 在上面的这个例子中,我们返回了node里自定义的
20、属性,因为这个属性的值是有效的JS日期,Ext可以对其进行排序。这就是一个关于如何通过sortType选项让TreeSorter对任何效劳器端数据进行排序的演示。编辑:很多时候,如果能编辑节点的值将是很有用的一个功能。在观察分类产品的层级结构时,你可能希望对产品的种类或者产品的名字做直接的修改,而不希望再去访问别的页面。那么你就可以通过Ext.tree.TreeEditor来实现这个功能。TreeEditor默认在你双击节点标签的时候会为你的节点提供一个用于编辑的TextField。但是,和drag-and-drop拖拽一样,开启这个功能并不会自动向效劳器端保存改动。你需要在编辑完节点后触发某
21、个事件然后调用事件提供的函数来进行相应的操作:editor.on(beforecomplete, function(editor, newValue, originalValue)/ Possible Ajax call?);beforecomplete事件函数有如下三个参数:1. editor:用来编辑这个节点的编辑字段;2. newValue:输入的值;3. originalValue:改动前的值。然而,你需要注意的是editor这个参数不是一个普通的Ext.form.Field。它有一些额外的属性,其中最有用的就是editNode对编辑节点的引用。你可以通过这个属性来获得节点的id,这个
22、属性在向效劳器发请求来和数据库同步编辑的数据时很重要。与TreePanel的beforemovenode事件相比,beforecomplete可以让用户通过在处理函数的结尾返回false来取消编辑改动。AJAX请求需要提供failure处理函数来手动地复原先前的数值。现在我们介绍了如何建立一个简单的节点编辑器,但这还意味着我们还需要完成一些更复杂的功能。TreeEditor的构造函数里有两个可选的参数一共三个,后两个可选。一个是field的配置对象,一个是TreeEditor的配置对象。field的配置可以是一下两者之一: 标准TextField编辑器的配置对象; 已经建立的表单字段的实例。如
23、果是后者,你可以在此采用NumberField,DateField或者其他的Ext.form.Field。第二个可选参数可以让你配置TreeEditor,只要一点小小的改动就能实现令人冲动的功能。例如,我们可以使用cancelOnEsc来允许用户通过按下Esc键取消任何编辑;或者使用ignoreNoChange来避开编辑完成事件如果值在编辑后并没有改变。修剪树枝:关于TreePanel,还支持一些其它的技巧改变selection model选择模型,过滤节点,以及显示背景菜单等。所以,让我们现在就学习它们。Selection models选择模型:在我们之前的例如代码里,我们可以通过拖拽和编辑
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Extjs 教程 _Tree
限制150内