Extjs教程_第八章_Tree(树)
extjs中的树控件详解
第八章 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包中的全部条目:



