1、Tree(树)介绍基于 jQurey UI这个插件能够把无序列表转换成可展开与收缩的 Tree。支持 XML，JSON，Html 三种数据源。提供创建，重命名，移动，删除，拖放节点操作。可以自己自定义创建，删除，嵌套，重命名，选择节点的规则。在这些操作上可以添加多种监听事件。属性：选项名 类型 描述 默认值url 字符串 一个网址 retrive 远程数据。 nullanimate 布尔 当节点展开或折叠是否显示动画效果。 falsecheckbox 布尔 是否带复选框 Falsemethod 字符串 如果定义动画效果时显示节点展开或折叠。 postcaseadeCheck 布尔 定义一个层叠
2、约束。 TrueonlyLeafCheck 布尔 定义显示子节点在复选框内 Falsednd 布尔 定义一个拖放 Falsedata 数组 节点数据加载 Null事件：许多事件回调函数可以采取节点参数，它包含以下属性：身份：一个标识值绑定到的节点。文本：文本将显示。约束：是否节点约束。属性：自定义属性绑定到节点。目标： DOM 对象目标。事件名 参数 描述 onClick node 用户点击一个节点时触发。 ，该节点参数包含以下属性：id:节点 ID text:节点的文本attributes:节点自定义属性target:点击 DOM 对象的目标onDblClick node 用户双击一个节点时
3、触发，参数同 onclick 事件onLoadSuccess arguments 加载数据成功时触发，参数 arguments 类似jQuery.ajax.的 success 函数onLoadError arguments 加载数据成功时触发，参数 arguments 类似jQuery.ajax.的 error 函数onBeforeExpand node 之前的节点是展开，返回取消此展开。onExpand node 当节点扩展。onBeforeCollapsenode 节点崩溃前取消崩溃作用。onCheck node,checked 用户点击复选框。onBeforeSelect node 选择
4、一个节点，返回该动作。onSelect node 挑选一个节点。onContexMenu e,node 右键点击onDrop target,source，point当节点下降。目标：对象，节点被定位为下降。来源：源节点。点：表明拖放操作，可能的值：追加的，最重要的或底部。onBeforeEdit node 编写一个节点之前onAfterEdit node 编写一个节点之后onCancelEdit node 取消该操作方法：方法名 参数 描述options none 返回树的所有参数对象loadData data 加载树的数据reload none 重新加载树的数据getRoot none 返回
5、树的 root 节点getRoots none 返回树的所有 root 节点getParent target 返回某个节点的父节点getChildrentarget 返回某个节点的孩子节点getChecked none 获取被勾选的节点getSelectednone 获取选中的节点，并返回它，如果没有节点选择返回 null。isLeaf target 判断某个节点是否叶子节点select target 选择一个节点，目标参数表明该节点的 DOM 对象。find id 查找指定节点，并返回该对象。check target 获取指定的被选节点uncheck target 获取未指定的被选节点col
6、lapse target 折叠节点，目标参数表明该节点的 DOM 对象。expand target 展开一个节点，目标参数表明该节点的 DOM 对象。collapseAllnone 折叠所有节点expandAll none 展开所有节点append param 一些子节点追加到父节点。参数有两个属性：parent: DOM 对象，父节点追加。data:数组，节点数据。toggle target 绑定某个节点的展开或者折叠状态，使之不能再改变。Insert Param 插入一个节点之前或之后指定的节点。“参数的参数包含以下属性：之前：对象，节点之前插入。之后：对象，插入节点后。数据对象，该节点的
7、数据。Pop target 弹出一个节点和它的一个子节点是一样的，但返回被删除的节点数据删除。remove Target 删除一个节点和它的子节点，目标参数表明该节点的 DOM 对象。update param 更新指定的节点，参数 param 包含如下属性：Target：目标节点；id,text,iconCls,checked,etc.enableDnd None 启动拖动disableDnd None 结束拖动beginEdit nodeEi 开始编辑一个节点endEdit nodeEi 结束编辑一个节点cancelEdit nodeEi 取消编辑一个节点ExtJs基于 ExtJsTreeP
8、anel属性：root: Ext.tree.TreeNode 树的根节点对象 dropZone: Ext.tree.TreeDropZone 若干置下有效的话，tree 所用的 dropZonedragZone: Ext.tree.TreeDragZone 若干拖动有效的话，tree 所用的 dragZoneheader: Ext.Element 面板的头部元素 Element。只读的。body: Ext.Element 面板的躯干元素 Element 用于承载 HTML 内容。footer: Ext.Element 面板的底部元素 Element。只读的。buttons: Array 面板的
9、按钮组成的数组。只读的。dd: Ext.dd.DragSource. 如果面板的 draggable 的配置被打开，那么该属性的值就是一个 Ext.dd.DragSource 实例，代表着是谁负责拖动该面板。items: MixedCollection 此容器的组件集合，类型为 Ext.util.MixedCollectiinitialConfig: Object 组件初始化配置项。只读的。el: Ext.Element 该组件的 Ext.Element 元素对象。只读的。ownerCt: Ext.Container 组件自身的 Ext.Container（默认是 undefined，只有在组
10、件加入到容器时才会自动设置该属性）只读的。hidden: Boolean True 表示为组件是隐藏的。只读的。disabled: Boolean True 表示为组件已被禁止。只读的。rendered: Boolean True 表示为该组件已经渲染好了。只读的。方法：TreeEditor属性：initialConfig: Object 组件初始化配置项。只读的。el: Ext.Element 该组件的 Ext.Element 元素对象。只读的。用 getE1 可返回该对象。组件自身的 Ext.Container（默认是 undefined，只有在组件加入到容器时才会自动设置该属性）只读的。
11、The components owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. hidden: Boolean True 表示为组件是隐藏的。只读的。True if this component is hidden. Read-only.disabled: Boolean True 表示为组件已被禁止。只读的。True if this component is disabled. Read-onl
12、y. rendered: Boolean True 表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. 方法：TreeEditor( TreePanel tree, Object config ) 参数项： tree : TreePanel config : Object Either a prebuilt Ext.from.Field instance or a Field config object 既可以是内建的 Ext.from.Field 实例也可以 Field 的配置项对象返回值：void Ed
13、itor( Object config ) 参数项： config : Object 配置项对象。The config object 返回值： void startEdit( Mixed el, String value ) 进入编辑状态并显示编辑器。Starts the editing process and shows the editor. 参数项： el : Mixed ；要编辑的元素。The element to edit value : String ；编辑器初始化的值，如不设置该值便是元素的 innerHTML。(optional) A value to initialize t
14、he editor with. If a value is not provided, it defaults to the innerHTML of el. 返回值： voidsetSize( Number width, Number height ) 设置编辑器高、宽。Sets the height and width of this editor. 参数项：width : Number 新宽度。The new width height : Number 新高度。The new height 返回值：voidrealign() 按照当前的最齐设置，把编辑器重新对齐到所绑定的字段。Reali
15、gns the editor to the bound field based on the current alignment config value. 参数项：None. 返回值：void completeEdit( Boolean remainVisible ) 结束编辑状态，提交变化的内容到所属的字段，并隐藏编辑器。Ends the editing process, persists the changed value to the underlying field, and hides the editor. 参数项：remainVisible : Boolean 让编辑过后仍然显
16、示编辑器，这是重写默认的动作（默认为 false）。Override the default behavior and keep the editor visible after edit (defaults to false) 返回值：void cancelEdit( Boolean remainVisible ) 取消编辑状态并返回到原始值，不作任何的修改。Cancels the editing process and hides the editor without persisting any changes. The field value will be reverted to t
17、he original starting value. 参数项：remainVisible : Boolean 让编辑过后仍然显示编辑器，这是重写默认的动作（默认为 false）。Override the default behavior and keep the editor visible after cancel (defaults to false) 返回值：void setValue( Mixed value ) 设置编辑器的数据。Sets the data value of the editor 参数项：value : Mixed 所属 field 可支持的任意值。Any vali
18、d value supported by the underlying field 返回值：void getValue() : Mixed 获取编辑器的数据。Gets the data value of the editor 参数项：None.返回值：Mixed 数据值。The data value Component( Ext.Element/String/Object config ) 参数项： config : Ext.Element/String/Object 配置项。如果传入的是一个元素，那么它将是内置的元素以及其 id 将用于组件的 id。如果传入的是一个字符串，那么就假设它是现有
19、元素身上的 id，也用于组件的 id。否则，那应该是一个标准的配置项对象，应用到组件身上。The configuration options. If an element is passed, it is set as the internal element and its id used as the component id. If a string is passed, it is assumed to be the id of an existing element and is used as the component id. Otherwise, it is assumed t
20、o be a standard config object and is applied to the component. 返回值：voidapplyToMarkup( String/HTMLElement el ) 把这个组件应用到当前有效的 markup。执行该函数后，无须调用 render()。Apply this component to existing markup that is valid. With this function, no call to render() is required. 参数项：el : String/HTMLElement 返回值：void add
21、Class( string cls ) : Ext.Component /removeClass( string cls )加入 CSS 样式类到组件所在的元素。Adds a CSS class to the components underlying element. 参数项：cls : string 要加入的 CSS 样式类。The CSS class name to add 返回值： Ext.Component this destroy()清除任何的事件的句柄，在 DOM 中移除组件的元素，从容器 Ext.Container 中移除本身（如果适合的话）和在 Ext.ComponentMg
22、r 注销 销毁的方法一般由框架自动执行，通常不需要直接执行参数项：None. 返回值：voidgetEl() : Ext.Element 返回所属的 Ext.Element。getId() : String 返回该组件的 id。Returns the id of this component. 参数项：None返回值 String getItemId() : String 返回该组件的 item id。Returns the item id of this component. 参数项：None.返回值：String focus( Boolean selectText, Boolean/Num
23、ber delay ) : Ext.Component 试着将焦点放到此项。Try to focus this component. 参数项： selectText : Boolean （可选的）true 的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component delay : Boolean/Number （可选的）延时聚焦行为的毫秒数（true 表示为 10 毫秒）。(optional) Delay the focus this number of milliseco
24、nds (true for 10 milliseconds) 返回值：Ext.Component this disable() : Ext.Component /enable() 启用禁止该组件。Disable this component. 参数项： None. 返回值： Ext.Component this show() : Ext.Component 显示该组件。Show this component. 参数项：None. 返回值：Ext.Component this setDisabled( Boolean disabled ) : Ext.Component 方便的函数用来控制组件禁
25、用/可用。Convenience function for setting disabled/enabled by boolean. 参数项：disabled : Boolean 返回值：Ext.Component this hide() : Ext.Component 隐藏该组件。参数项： None. 返回值：Ext.Component this setVisible( Boolean visible ) : Ext.Component 方便的函数用来控制组件显示/隐藏。参数项：visible : Boolean 为 True 时显示/false 时隐藏。True to show, fals
26、e to hide 返回值： Ext.Component this isVisible() : Boolean 该组件可见时返回 true。参数项：None. 返回值：Boolean 为 True 时显示/false 时隐藏。True if this component is visible, false otherwise. cloneConfig( Object overrides ) : Ext.Component 根据原始传入到该实例的配置项值，克隆一份组件。getXType() : String 获取 Ext.ComponentMgr 在已登记组件的 xtypes。参数项：None.
27、 返回值：String The xtype isXType( String xtype, Boolean shallow ) : Boolean 测试这个组件是否属于某个指定的 xtype。参数项：xtype : String 测试该组件的 xtype。 shallow : Boolean 返回值：Boolean true 就表示为测试该组件是否这个 xtype 本身的实例getXTypes() : String 返回以斜杠分割的字符串，表示组件的 xtype 层次。参数项：None. 返回值：String 层次的字符串。The xtype hierarchy string findParen
28、tBy( Function fcn, Object scope ) : Ext.Container 在此组件之下由自定义的函数作搜索依据查找容器。参数项： fcn : Function scope : Object (optional)（可选的） 返回值： Ext.Container 首次匹配的容器。findParentByType( String/Class xtype ) : Ext.Container 根据 xtype 或 class 查找该容器下任意层次中某个容器。参数项： xtype : String/Class 组件的 xtype 字符串，或直接就是组件的类本身。 返回值： Ext
29、.Container 首次匹配的容器。nextSibling() : Ext.Component 在所属的容器范围中范围旁边下一个的组件。参数项： None. 返回值： Ext.Component previousSibling() : Ext.Component 在所属的容器范围中范围旁边上一个的组件。参数项： None. 返回值：Ext.Component getBubbleTarget() : 包含该组件的容器。the Container which owns this Component. 为 Observable 对象的 fireEvent 方法，方便对该组件的父级组件进行逐层上报。
30、参数项： None. 返回值：包含该组件的容器。事件：beforestartedit() 编辑器开始初始化，但在修改值之前触发。若事件句柄返回 false 则取消整个编辑事件。startedit() 当编辑器显示时触发。beforecomplete() 修改已提交到字段，但修改未真正反映在所属的字段上之前触发。若事件句柄返回 false 则取消整个编辑事件。complete() 当编辑完成过后，任何的改变写入到所属字段时触发。specialkey() 用于导航的任意键被按下触发（arrows、tab、enter、esc 等等）。disable() 当组件禁用后触发。enable() 当组件被启
31、用后触发。beforeshow() 当组件显示出来之前触发。beforehide() 当组件将要隐藏的时候触发。hide() 当组件隐藏后触发。show() 当组件显示后触发。beforerender() 当组件渲染之前触发。如返回 false 则阻止渲染。render() 组件渲染之后触发。afterrender() 组件销毁之前触发。如返回 false 则停止销毁。beforedestroy() 组件销毁之前触发。如返回 false 则停止销毁。destroy() 组件销毁之后触发。beforestaterestore() 当组件的状态复原之前触发。如返回 false 则停止复原状态。st
32、aterestore() 当组件的状态复原后触发。beforestatesave() 当组件的状态被保存到 state provider 之前触发。statesave() 当组件的状态被保存到 state provider 后触发。用 ExtJS 的 TreePanel 做了个小 demo首先看看效果：下面开始来一步步做下去，首先是页面文件 index.html, 这里有两个地方要注意一下，一个是我们引用的 JS 如果采用 GBK 的默认编码，浏览器会显示未结束的字符串常量的错误，所以我们一般会修改 JS 文件的编码方式为 UTF-8，或者在导入 JS 时加上编码字符集。XmlTreeLoad
33、er Example然后是我们的主 JS 文件 xml-tree-loader.js，为了模拟从后台服务器端动态加载指定节点的所有孩子节点，在这里为beforeload事件指派了一个事件处理者，它会根据当前待加载节点的 id 号，去取不同的 xml 文件。/ Extend the XmlTreeLoader to set some custom TreeNode attributes specific to our application:/Ext.app.MyXMLLoader = Ext.extend(Ext.ux.tree.XmlTreeLoader, processAttributes
34、 : function(attr)attr.text = attr.name;attr.leaf = false;);Ext.onReady(function()var treeloader = new Ext.app.MyXMLLoader(/ dataUrl : tree.jsp/这里可以不需要指定 URL，在beforeload 事件响应里面设置);var tree = new Ext.tree.TreePanel(el: tree,useArrows: true,autoScroll: true,animate: true,enableDD: true,containerScroll: true,border: false,loader: treeloader);var rootID = 0;var rootnode = new Ext.tree.AsyncTreeNode(id : rootID,
