extjstree的相关组件及属性

格式：doc
大小：15.61 KB
文档页数：10

下载文档原格式

/ 10

treeselect树形选择器的normailzer的用法

treeselect树形选择器的normailzer的用法treeselect是一个流行的Vue.js 组件，用于创建树形选择器。

至于你提到的normailzer，我猜测你可能是在说normalizer，这是一个常见的策略，用于将值转换为可以比较的格式。

normalizer是v-model的一个修饰符，它可以将输入的值转换为一种标准的格式，这样在进行比较或处理时可以确保值的一致性。

假设我们有一个树形选择器，用户可以从一个下拉列表中选择一个项目。

列表中的项目有一个文本和相关的数字值。

我们希望用户输入的值是数字而不是文本。

为了实现这一点，我们可以使用normalizer修饰符来确保用户输入的值始终是数字。

以下是一个简单的示例：<template><treeselect v-model="value" :normalizer="normalizer" /></template><script>export default {data() {return {value: null,};},methods: {normalizer(value) {if (value === null) return null;return Number(value); // 将值转换为数字},},};</script>在上面的示例中，我们定义了一个normalizer方法，它将值转换为数字。

然后，我们使用:normalizer="normalizer"将此方法绑定到treeselect组件的normalizer属性上。

这样，无论用户输入什么，都会自动转换为数字。

当然，实际的使用场景可能更复杂，但这应该给你提供了一个关于如何使用normalizer的基本概念。

layui中的tree树组件方法

layui中的tree树组件方法
在Layui中，tree树组件提供了一系列方法用于操作树，常用
的方法有：
1. render(elem, data): 渲染树组件，其中elem为容器的选择器，data为树的数据。

2. on(eventName, callback): 绑定树节点事件，可以监听节点的
点击、展开、折叠等事件，eventName为事件名称，callback
为事件回调函数。

3. reload(elem, data): 重新加载树组件，更新树的数据。

4. setChecked(elem, checked): 设置节点选中状态，elem为节点
的选择器，checked为布尔值，true表示选中，false表示取消
选中。

5. setDisabled(elem, disabled): 设置节点禁用状态，elem为节点
的选择器，disabled为布尔值，true表示禁用，false表示启用。

6. addNodes(elem, nodes): 添加节点，elem为节点的选择器，nodes为要添加的节点数据数组。

7. delNodes(elem): 删除节点，elem为节点的选择器，删除节
点同时会删除其所有子节点。

8. updateNode(elem, data): 更新节点数据，elem为节点的选择器，data为要更新的节点数据。

以上是常用的tree树组件方法，通过调用这些方法可以实现对树的增删改查操作。

Extjs4.1中可拖动赋值的树控件

Extjs4.1中可拖动赋值的树控件先看下效果图：下面是详细代码：<html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Drag and Drop between 2 TreePanels</title><link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /><script type="text/javascript" src="extjs/ext-all.js"></script><style type="text/css">#tree, #tree2 {float: left;margin: 20px;}</style></head><body><h1>Drag and Drop betweens two TreePanels</h1><p>The TreePanels have a TreeSorter applied in "folderSort" mode.</p><p>Both TreePanels are in "appendOnly" drop mode since they are sorted.</p><p>Drag along the edge of the tree to trigger auto scrolling while performing a drag and drop.</p><p>The data for this tree is asynchronously loaded with a JSON TreeLoader.</p><p>The js is not minified so it is readable. See <a href="two-trees.js">two-trees.js</a>.</p><script language="javascript">Ext.require(['*']);Ext.onReady(function(){var store = Ext.create('Ext.data.TreeStore', { proxy: {type: 'ajax',url: 'JSON/tree-data.json'},root: {text: 'Ext JS',id: 'src',expanded: true},folderSort: true,sorters: [{property: 'text',direction: 'ASC'}]});var tree = Ext.create('Ext.tree.Panel', {id: 'tree',store: store,width: 250,height: 300,viewConfig: {plugins: {ptype: 'treeviewdragdrop',appendOnly: true}},renderTo: document.body});var store2 = Ext.create('Ext.data.T reeStore', { proxy: {type: 'ajax',url: 'JSON/tre-data.json'},root: {text: 'Custom Ext JS',id: 'src',expanded: true,/* children: []*/},folderSort: true,sorters: [{property: 'text',direction: 'ASC'}]});var tree2 = Ext.create('Ext.tree.Panel', { id: 'tree2',width: 250,height: 300,store: store2,viewConfig: {plugins: {ptype: 'treeviewdragdrop',appendOnly: true}},renderTo: document.body});});</script></body></html>id:'anchor',leaf:true},{text:'Border',id:'border',leaf:true},{text:'Card (TabPanel)',id:'card-tabs',leaf:true},{text:'Card (Wizard)',id:'card-wizard',leaf:true},{text:'Column',id:'column',leaf:true},{text:'Fit',id:'fit',leaf:true},{text:'Table',id:'table',leaf:true},{text:'vBox',id:'vbox',leaf:true},{text:'hBox',id:'hbox',leaf:true}]},{text:'Custom Layouts',children:[{text:'Center',id:'center',leaf:true}]},{text:'Combination Examples',。

EasyUI-tree

树重写默认方法$.fn.tree.defaults.这棵树显示分层数据在一个树结构在一个web页面。

它提供了用户扩展、压缩、拖拽、编辑和异步加载的功能。

依赖∙draggable∙droppable应用实例树可以研究在< ul >元素。

标记可以定义了叶和儿童。

节点将<li>元素在ul列表。

以下显示的元素,这将用来制作树节点的嵌套在ul元素。

[html]预览复制print?1.<ul id="tt"class="<A title=EasyUI href="/tag/easyui/">EasyUI</A>-tree">2.3.<li>4.5.<span>Folder</span>6.7.<ul>8.9.<li>10.11.<span>Sub Folder 1</span>12.13.<ul>14.15.<li>16.17.<span><a href="#">File 11</a></span>18.19.</li>20.21.<li>22.23.<span>File 12</span>25.</li>26.27.<li>28.29.<span>File 13</span>30.31.</li>32.33.</ul>34.35.</li>36.37.<li>38.39.<span>File 2</span>40.41.</li>42.43.<li>44.45.<span>File 3</span>46.47.</li>48.49.</ul>50.51.</li>52.53.<li>54.55.<span>File21</span>56.57.</li>58.59.</ul>树还可以被定义在一个空的< ul >元素和负载数据使用javascript。

学习ExtJs笔记

学习ExtJs笔记Grid表格1、添加数据的时候，将数据的属性设置为dirty。

因为在使用Ajax提交数据的时候，非dirty的数据不会自动保存到store的modifield属性中。

2、保存数据：（1）store.modifield.slice(start,end);作用：返回一个新数组，取得从start到end的所有元素，但不包括end元素。

如果参数只有一个0，则表示取得全部的数据；（2）each(m,function())(m为一个数组)，该方法主要作用是遍历数组m中的每一条记录，并且每条记录都按照function()方法进行处理。

不可在function方法里面加上循环，否则，将出现多重结果。

（3）listeners监听器：listeners: {"afterEdit": {fn: afterEdit,scope: this} }作用：监听afterEdit。

当单元格编辑完成或者退出编辑状态，自动调用fn方法，作用的范围是当前页面。

（4）当添加数据成功后，新添加的数据有三角行的标识，要除掉标识，可用Record 的commit方法。

3、读取数据（1）从Txt文件中读取数据将读取的数据编码eval(response.responseText),否则将不能正确读取数据。

（2）设置记录的字段的值var initValue = {name:'',gender:'',age:''};var p = new Record(initValue);p.set('name',data_get[i].name);p.set('gender',data_get[i].gender);p.set('age',data_get[i].age);Tree 树1、Tree的加载使用方法render。

Tree.render()方法将tree加载到tree的‘el’中。

ExtJs4实现下拉树选择框ComboTree

},this);
}
},
createPicker:function(){
varself=this;
varaurl=self.treeUrl;
if(self.multiSelect){//这里增加了多选的功能，在后台返回的JSON数据中，应加上checked:true之类的属性
if(aurl.indexOf("?")==-1)
expanded:true,
text:self.rootText,
id:self.rootId,
leaf:false
},Байду номын сангаас
autoLoad:true
});
self.picker=newExt.tree.Panel({
height:300,
autoScroll:true,
floating:true,
focusOnToFront:false,
else{
record.expand();
}
}else{
setToValues(record);
}
functionsetToValues(record){
if(!self.multiSelect){
self.values=record.get('id');
self.texts=record.get('text');
multiSelect:this.multiSelect||false,
fieldName:'category',
useId:eId||true,//是否使用id域，如果不选择，则值直接使用Picker的value值
selectedIds:'',

ExtJS 4 官方指南翻译：Tree组件

1.Ext.create('Ext.tree.Panel', {2. renderTo: Ext.getBody(),3. title: 'Simple Tree',4. width: 150,5. height: 150,6. root: {7. text: 'Root',8. expanded: true,9. children: [10. {11. text: 'Child 1',12. leaf: true13. },14. {15. text: 'Child 2',16. leaf: true17. },18. {19. text: 'Child 3',20. expanded: true,21. children: [22. {23. text: 'Grandchild',24. leaf: true25. }26. ]27. }28. ]29. }30.});此树面板渲染到document.body元素上。

我们把定义的根节点（The Root Node）自动扩张开来，这是默认的情况。

根节点有三个子节点，其中前两个是leaf 节点，表示他们下面没有任何子节点（children）了（终结了）。

第三个节点是一个叶子节点，已经有一个child 的叶节点（one child leaf node）。

text 属性是节点的显示的文本。

可打开例子看看效果如何。

This Tree Panel renders itself to the document body. We defined a root node that is expanded by default. The root node has three children, the first two of which are leaf nodes which means they cannot have any children. The third node is not a leaf node and has has one child leaf node. The text property is used as the node's text label.See Simple Tree for a live demo.树面板的数据存储在TreeStore。

Ext属性详细信息

Ext属性详细信息Ext.window属性详细信息Ext.Window扩展⾃Ext.Panel，其xtype值为window。

1、主要配置项closable：是否允许关闭窗⼝，默认为true。

closeAction：关闭窗⼝的动作，包括以下两种：close：从DOM删除窗⼝，销毁窗⼝及其所属组件，窗⼝不再可⽤，重新显⽰需要调⽤show⽅法。

此为默认值。

hide：通过设置可见性隐藏窗⼝，窗⼝还可⽤，调⽤show⽅法后重新显⽰。

constrain：是否约束窗⼝只能在容器内移动，默认为false。

窗⼝默认渲染到document.body。

constrainHeader：是否约束窗⼝头部只能在容器内移动，默认为false。

draggable：是否可拖曳，默认为true。

resizable：是否可改变窗⼝的⼤⼩，默认为true。

modal：是否为模式窗⼝，默认为false。

maximizable：是否可最⼤化窗⼝，默认为false。

maximized：是否在初始化时最⼤化显⽰窗⼝，默认为false。

x：窗⼝的X坐标值。

y：窗⼝的Y坐标值。

manager：WindowGroup的引⽤。

expandOnShow：是否在窗⼝显⽰时展开它，默认为true。

当取值为false时，collapsed取值为true时，窗⼝初始显⽰时收缩。

minimizable：是否可最⼩化窗⼝，默认为false。

需要⾃定义最⼩化⾏为。

defaultButton：当窗⼝获得焦点时，默认获得焦点的按钮。

plain：主体背景是否透明，默认为false。

2、主要⽅法：show( [String/Element animateTarget], [Function callback], [Object scope] )：显⽰窗⼝。

hide( [String/Element animateTarget], [Function callback], [Object scope] )：隐藏窗⼝。

Ext.tree.PanelExtjs在表格中添加树结构，并实现节点移动功能

Ext.tree.PanelExtjs在表格中添加树结构，并实现节点移动功能最近在⽤Extjs 做后台管理系统，真的⾮常好⽤。

总结的东西分享⼀下。

先展⽰⼀下效果图好了，开始吧！⾸先说⼀下我的创建结构：⼀、构造内容这个函数中包括store的创建，treePanel的创建⼀个treePanel必须绑定⼀个.function constructor(config){//创建⼀个treeStore 数据(我的⽤ajax取的，你们随意~)var store = Ext.create('Ext.data.TreeStore', {proxy: {type: 'ajax',url: 'http://localhost/data/aa.txt',reader: {type: "json",rootProperty: "children",transform: function (data) {if (data.code === 1) console.log("error");return data;}}},folderSort: true});// 创建treePanel了var $tree = Ext.create('Ext.tree.Panel', {width: '100%',height: 600,store: store,useArrows: true,rootVisible: false,multiSelect: true, // 多选//singleExpand: true, //单展开autoScroll: true, // ⾃动滚屏columns: [{ // 列项xtype: 'treecolumn',text: '菜单名称',width: 250,sortable: true,menuDisabled: true,dataIndex: 'text'},{text: '节点类型',width: 150,dataIndex: 'user',menuDisabled: true,align: 'center',sortable: true},{text: '新增',width: 70,align: 'center',menuDisabled: true,renderer: function (value, metaData) {return "<a href='#" + Math.random() + "'>新增</a>";}},{text: '修改',width: 100,menuDisabled: true,xtype: 'actioncolumn',align: 'center',icon: '/images/edit.png'}, {xtype: 'actioncolumn',text: '删除',width: 100,menuDisabled: true,icon: '/images/delete.png',handler: function(grid, rowIndex,colIndex,record) {var rec = store.getAt(rowIndex);if(rec.get('children') === null){Ext.MessageBox.confirm("删除","确定删除吗？",function( button,text ){if( button == 'yes'){rec.remove();}});}else{Ext.MessageBox.alert("删除","当前元素含有⼦节点，不能被删除");}}}, {text: '上移',width: 50,menuDisabled: true,align: 'center',renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){return "<a href='#" + Math.random() + "'>上移</a>";}},{text: '下移',width: 50,menuDisabled: true,align: 'center',renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){return "<a href='#" + Math.random() + "'>下移</a>";}},{text: '升级',width: 50,menuDisabled: true,align: 'center',renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){return "<a href='#" + Math.random() + "'>升级</a>";}},{text: '降级',width: 50,menuDisabled: true,align: 'center',renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){return "<a href='#" + Math.random() + "'>降级</a>";}}],listeners:{ //监听事件cellclick: function (view, td, cellIndex, record, tr, rowIndex, e, eOpts){ // 单元格点击，贼好⽤ //判断点击的第⼏列（索引从0开始）if(cellIndex === 2) return display$WindowAddNode(rowIndex,record, store);if(cellIndex === 5) return moveEvent(rowIndex,record,store);if(cellIndex === 6) return downEvent(rowIndex,record, store);if(cellIndex === 7) return upgradeEvent(rowIndex,record, store);if(cellIndex === 8) return downgradeEvent(rowIndex,record, store);}}});config.parent.add($tree);return $tree;}⾯板创建完了，下⾯该实现功能了。

ext 组件大全

配置属性名称类型简介
allowDomMove Boolean 当渲染这个组件时是否允许移动Dom节点（默认值为true）。
applyTo Mixed 混合参数，表示把该组件应用指定的对象。参数可以是—节点的id，一个DOM节点或一个存在的元素或与之相对应的在document中已出现的id。当使用 applyTo，也可以提供一个id或CSS的class名称，如果子组件允许它将尝试创建一个。如果指写applyTo选项，所有传递到 renderTo方法的值将被忽略，并且目标元素的父节点将自动指定为这个组件的容器。使用applyTo选项后，则不需要再调用render()方法来渲染组件。
renderTo Mixed 混合数据参数，指定要渲染到节点的id，一个DOM的节点或一个已存在的容器。如果使用了这个配置选项，则组件的render()就不是必需的了。
stateEvents Array 定义需要保存组件状态信息的事件。当指定的事件发生时，组件会保存它的状态（默认为none），其值为这个组件支持的任意event类型，包含组件自身的或自定义事件。（例如：[‘click’,’customerchange’]）。
hideParent Boolean 是否隐藏父容器，该值为true时将会显示或隐藏组件的容器，false时则只隐藏和显示组件本身（默认值为false）。
id String 组件的id，默认为一个自动分配置的id。
listeners Object 给对象配置多个事件监听器，在对象初始化会初始化这些监听器。
timefield Ext.form.TimeField 时间录入项
trigger Ext.form.TriggerField 触发录入项
由于所有的组件都继承自ponent，因此在这里我们列出组件基类Component中的配置属性简单介绍。

EXT表单组件常见属性介绍（三）

EXT表单组件常见属性介绍（三）本范例展⽰如何使⽤表单的各种组件。

下拉框组件展⽰了5种使⽤范例：普通下拉框、绑定HTML组件的下拉框、树形下拉框、分页下拉框、多选下拉框等。

Js代码1. Ext.onReady(function(){2. Ext.BLANK_IMAGE_URL = "/widgets/ext-2.2/resources/images/default/s.gif";3. Ext.QuickTips.init();4. Ext.form.Field.prototype.msgTarget = "qtip";5.6. //component7. var hiddenField = new Ext.form.Hidden({8. name: "hiddenField",9. value: "1"10. });11.12. var usernameField = new Ext.form.TextField({13. name: "username",14. fieldLabel: "⽤户名",15. allowBlank: true,16. blankText: "请输⼊⽤户名！"17. });18.19. var pwdField = new Ext.form.TextField({20. name: "password",21. fieldLabel: "密码",22. allowBlank: true,23. blankText: "请输⼊密码！",24. inputType: "password"25. });26.27. var ageField = new Ext.form.NumberField({28. name: "age",29. allowBlank: true,30. blankText: "请输⼊年龄！",31. fieldLabel: "年龄",32. allowDecimals: false,33. allowNegative: false,34. minValue: 18,35. minText: "年龄不能少于18",36. maxValue: 100,37. maxText: "年龄不能⼤于100"38. });39.40. var love1 = new Ext.form.Checkbox({41. name: "love1",42. boxLabel: "打球",43. inputValue: "1"44. });45.46. var love2 = new Ext.form.Checkbox({47. name: "love2",48. boxLabel: "游泳",49. inputValue: "2"50. });51.52. var love3 = new Ext.form.Checkbox({53. name: "love3",54. boxLabel: "登⼭",55. inputValue: "3"56. });57.58. var loveGroup = new Ext.form.CheckboxGroup({59. name: "love",60. columns: [80, 80, 1.0],61. fieldLabel: "爱好",62. items: [love1, love2, love3]63. });64.65. var sex1 = new Ext.form.Radio({66. name: "sex1",67. boxLabel: "男",68. inputValue: "1"69. });70.71. var sex2 = new Ext.form.Radio({72. name: "sex1",73. boxLabel: "⼥",74. inputValue: "0"75. });76.77. var sexGroup = new Ext.form.RadioGroup({78. name: "sex",79. columns: [80, 1.0],80. fieldLabel: "性别",81. items: [sex1, sex2]82. });83.84. //本地数据源的组合框85. var store = new Ext.data.SimpleStore({86. fields: ["code", "name"],87. data: [88. ["1", "北京"],89. ["5", "上海"],90. ["4", "⼴东"]91. ]92. });93. var cmbProvince = new boBox({94. id: "cmbProvince",95. hiddenName: "province.id",96. fieldLabel: "省份",97. resizable: true,98. editable: false,99. width: 100,100. emptyText: "请选择...",101. store: store,102. valueField: "code",103. displayField: "name",104. triggerAction: "all",105. mode: "local"106. });107.108. //远程数据源的组合框109. var store2 = new Ext.data.SimpleStore({110. fields: ["name"],111. proxy: new Ext.data.HttpProxy({112. url: "../testForm!loadData.action"113. })114. });115.116. var cmbManager = new boBox({117. hiddenName: "manager",118. fieldLabel: "经理",119. editable: false,120. triggerAction: "all",121. mode: "local",122. maxHeight: 200,123. store: new Ext.data.SimpleStore({fields:[],data:[[]]}),124. onSelect: Ext.emptyFn,125. tpl: "<tpl for='.'><div id='tree'></div></tpl>"126. });127.128. var root = new Ext.tree.TreeNode({129. nodeId: 1,130. text: "根节点",131. expanded: true132. });133. root.appendChild(new Ext.tree.TreeNode({nodeId:2, text:"节点A", leaf:true})); 134. root.appendChild(new Ext.tree.TreeNode({nodeId:3, text:"节点B", leaf:true})); 135.136. var tree = new Ext.tree.TreePanel({137. root: root,138. border: false,139. autoHeight: true,140. autoScroll: true141. });142.143. tree.on("click", function(node){144. if(!node.isLeaf()) return; //只能选择叶节点145. //下拉框的隐藏值146. if(cmbManager.hiddenField){147. cmbManager.hiddenField.value = node.attributes.nodeId; 148. }149. cmbManager.setRawValue(node.text); //下拉框的显⽰值150. cmbManager.collapse(); //折叠下拉框151. });152.153. cmbManager.on("expand", function(){154. tree.render("tree");155. });156.157. //分页远程数据源的组合框158. var store3 = new Ext.data.JsonStore({159. url: "../testForm!loadData3.action",160. totalProperty: "totalNum",161. root: "books",162. fields: ["id", "name"]163. });164. var cmbBook = new boBox({165. hiddenName: "books",166. fieldLabel: "书籍",167. store: store3,168. valueField: "name",169. displayField: "name",170. triggerAction: "all",171. mode: "remote",172. queryParam: "books",173. loadingText: "正在装载数据...",174. width: 180,175. minChars: 1,176. editable: false,177. listWidth: 250,178. pageSize: 3179. });180.181. //HTML标准组件182. var cmbPass = new boBox({183. hiddenName: "status",184. fieldLabel: "是否有效",185. triggerAction: "all",186. editable: false,187. width: 100,188. transform: "isPass",189. lazyRender: true190. });191.192. var cmbTimes = new Ext.form.TimeField({193. hiddenName: "time",194. fieldLabel: "时间",195. minValue: "09:00",196. minText: "所选时间应⼤于{0}",197. maxValue: "18:00",198. maxText: "所选时间应⼩于{0}",199. format: "H时i分",200. increment: 30,201. invalidText: "时间格式⽆效！",202. maxHeight: 200,203. width: 100,204. value: "09时00分",205. editable: false206. });207.208. var cmbMonths = new Ext.ux.MultiSelectCombo({209. hiddenName: "months",210. fieldLabel: "⽉份",211. maxHeight: 200,212. editable: false,213. store: [["201010","201010"], ["201009","201009"], ["201008","201008"], ["201007","201007"], ["201006","201006"]], 214. mode: "local",215. width: 180,216. maxItemsCount: 3,217. maxItemsCountText: "最多只能选择三个选项！"218. });219.220. var cmbBirths = new Ext.form.DateField({221. name: "births",222. fieldLabel: "出⽣⽇期",223. disabledDays: [0,6],224. disabledDaysText: "禁⽌选择周末！",225. width: 100,226. readOnly: true,227. format: "Y-m-d",228. invalidText: "不是有效的⽇期值！"229. });230.231. var fieldSet1 = new Ext.form.FieldSet({232. title: "下拉框",233. checkboxName: "fieldSet1",234. checkboxToggle: true,235. autoHeight: true,236. layout: "table",237. layoutConfig: {238. columns: 3239. },240. defaults: {241. style:"margin-left:8px; margin-top:3px; margin-right:8px; margin-bottom:3px; valign:top",242. layout:"form",243. labelAlign: "right"244. },245. items: [246. {rowspan:1, colspan:1, items:[cmbProvince]},247. {rowspan:1, colspan:1, items:[cmbManager]},248. {rowspan:1, colspan:1, items:[cmbBook]},249. {rowspan:1, colspan:1, items:[cmbPass]},250. {rowspan:1, colspan:1, items:[cmbTimes]},251. {rowspan:1, colspan:1, items:[cmbMonths]},252. {rowspan:1, colspan:1, items:[cmbBirths]}]253. });254.255. var remarksField = new Ext.form.TextArea({256. name: "remarks",257. fieldLabel: "备注",258. width: 400,259. height: 80260. });261.262. var form = new Ext.form.FormPanel({263. id: "frmAddUser",264. title: "新增⽤户",265. autoWidth: true,266. autoHeight: true,267. frame: true,268. renderTo: Ext.getBody(),269. labelWidth: 70,270. tbar: toolbar,271. items: [hiddenField, usernameField, pwdField, ageField, loveGroup, sexGroup, 272. fieldSet1, remarksField],273. url: "../testForm!ajaxSubmitForm.action"274. });275. });Js代码1. Ext.onReady(function(){2. Ext.BLANK_IMAGE_URL = "/widgets/ext-2.2/resources/images/default/s.gif";。

ExtJS Tree刷新后自动展开并选择节点

} ]
});
}
var tree = new Ext.ux.tree.TreeGrid(
{
title : '地市',
width : 550,
height : 300,
dataUrl : 'treegrid-data.json',
renderTo : Ext.getBody(),
scope : this,
handler : function(b, e) {
//获取当前选择节点的路径
var node = tree.getSelectionModel()
.getSelectedNode();
oLastNode);
});
}
},
{
text : '重载',
tooltip : '重载数据并选择上一次的节点',
scope : this,
handler : function(b, e) {
//展开路径,并在回调函数里面选择该节点
tree.expandPath(path, 'id', function(
bSucess, oLastNode) {
tree.getSelectionModel().select(
.getSelectionModel()
.select(
oLastNode);
});
}, this);
}
//展开路径,并在回调函数里面选择该节点
tree.expandPath(path, 'id', function(bSucess,

devexpress treelist的用法 -回复

devexpress treelist的用法-回复DevExpress TreeList是一种用于显示层次结构数据的控件，特别适用于需要展示复杂数据和层次关系的场景。

它提供了丰富的功能和灵活的设置选项，可以帮助开发人员轻松地创建功能强大且易于使用的树形列表。

本文将详细介绍DevExpress TreeList的用法，包括如何创建和绑定数据、设置列、展开和折叠节点、编辑数据等。

第一步：创建DevExpress TreeList控件1. 在Visual Studio中，创建一个新的Windows Forms应用程序项目。

2. 从工具箱中将DevExpress TreeList控件拖放到窗体上。

3. 在窗体的代码文件中，添加对DevExpress组件库的引用。

第二步：绑定数据1. 在TreeList的属性窗口中，找到Data Source属性，点击其右侧的“…”按钮。

2. 弹出的数据绑定对话框中，选择要绑定的数据源类型，如DataSet、DataTable或自定义对象等。

3. 根据选择的数据源类型，配置相应的连接字符串或设置对象。

4. 选择要绑定的数据表或自定义对象，并设置相应的字段。

第三步：设置列1. 在TreeList的属性窗口中，找到Columns集合属性，点击其右侧的“…”按钮。

2. 弹出的列集合编辑器中，点击“添加”按钮来添加新的列。

3. 针对每一列，设置其字段名、显示标题、列宽、数据类型以及其他样式等属性。

4. 可以使用列集合编辑器来调整列的顺序、删除列或编辑列样式等。

第四步：展开和折叠节点1. 通过TreeList的OptionsView属性，可以设置树节点的展开和折叠行为。

2. 设置OptionsView.ShowRoot属性为true，表示显示根节点。

3. 设置OptionsView.ShowChildrenInTreeMode属性为true，表示以树形结构展示子节点。

4. 设置OptionsBehavior.ExpandNodesOnIncrementalSearch属性为true，表示在按键输入时自动展开匹配的节点。

extjs4tree快速检索功能

extjs4tree快速检索功能//extjs4.* ⽆Ext.tree.TreeFilter，⾃定义树形检索功能Ext.define('WMS.view.TreeFilter', {filterByText : function(text) {this.filterBy(text, 'text');},filterBy : function(text, by) {this.clearFilter();var view = this.getView(), me = this, nodesAndParents = [];this.getRootNode().cascadeBy(function(tree, view) {var currNode = this;if (currNode && currNode.data[by] && currNode.data[by].toString().toLowerCase().indexOf(text.toLowerCase()) > -1) { me.expandPath(currNode.getPath());while (currNode.parentNode) {nodesAndParents.push(currNode.id);currNode = currNode.parentNode;}}}, null, [ me, view ]);this.getRootNode().cascadeBy(function(tree, view) {var uiNode = view.getNodeByRecord(this);if (uiNode && !Ext.Array.contains(nodesAndParents, this.id)) {Ext.get(uiNode).setDisplayed('none');}}, null, [ me, view ]);},clearFilter : function() {var view = this.getView();this.getRootNode().cascadeBy(function(tree, view) {var uiNode = view.getNodeByRecord(this);if (uiNode) {Ext.get(uiNode).setDisplayed('table-row');}}, null, [ this, view ]);}});Ext.define('MyTreePanel', {extend : 'Ext.tree.Panel',mixins : [ 'WMS.view.TreeFilter' ]});this.treePanel = Ext.create('MyTreePanel', {id: 'treePanel',region: 'center',minSize: 150,rootVisible: false,autoScroll: true,store: this.treeStore,title : '⼯具栏',tools: [{type: 'expand',handler: function () { Ext.getCmp("treePanel").expandAll(); } }, {type: 'collapse',handler: function () { Ext.getCmp("treePanel").collapseAll(); } }],tbar : [ {xtype : 'trigger',triggerCls : 'x-form-clear-trigger',onTriggerClick : function() {this.setValue('');Ext.getCmp("treePanel").clearFilter();},width : '100%',emptyText : '快速检索功能',enableKeyEvents : true,listeners : {keyup : {fn : function(field, e) {if (Ext.EventObject.ESC == e.getKey()) {field.onTriggerClick();} else {Ext.getCmp("treePanel").filterByText(this.getRawValue()); }}}}} ]});。

Extjs教程_第八章_Tree(树)

第八章 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(事件)的方法。

Extjs常用属性

ExtJS是一个很不错的Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力。

ExtJS是一个用javascript编写，与后台技术无关的前端ajax框架。

因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。

在学习了本教程后，可以下载这个基于ExtJS2.0开发的单用户Blog系统的源代码，这个系统是我们团队中的williamraym与大峡等人开发的一个演示系统，系统源码整体质量比较高，通过学习这套源代码相邻一定能提高您ExtJS的综合水平。

ExtJS是一个Ajax框架，是一个用javascript写的，用于在客户端创建丰富多彩的web应用程序界面。

ExtJS可以用来开发RIA也即富客户端的AJAX应用，下面是一些使用ExtJS 开发的应用程序截图：ExtJS是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。

因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。

ExtJs最开始基于YUI技术，由开发人员Jack Slocum开发，通过参考Java Swing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。

Ext2.0对框架进行了非常大的重构，其中最重要的就是形成了一个结构及层次分明的组件体系，由这些组件形成了Ext的控件，Ext组件是由Component类定义，每一种组件都有一个指定的xtype属性值，通过该值可以得到一个组件的类型或者是定义一个指定类型的组件。

组件大致可以分成三大类，即基本组件、工具栏组件、表单及元素组件。

基本组件有：xtype Class------------- ------------------box Ext.BoxComponent 具有边框属性的组件button Ext.Button按钮colorpalette Ext.ColorPalette 调色板component ponent组件container Ext.Container容器cycle Ext.CycleButton一个SplitButton的实用子类,用于在多个item之间切换状态dataview Ext.DataView 数据显示视图datepicker Ext.DatePicker 日期选择面板editor Ext.Editor编辑器editorgrid Ext.grid.EditorGridPanel 可编辑的表格grid Ext.grid.GridPanel 表格paging Ext.PagingToolbar 工具栏中的间隔panel Ext.Panel面板progress Ext.ProgressBar 进度条splitbutton Ext.SplitButton 可分裂的按钮tabpanel Ext.TabPanel选项面板treepanel Ext.tree.TreePanel 树viewport Ext.ViewPort 视图window Ext.Window窗口工具栏组件有---------------------------------------toolbar Ext.Toolbar工具栏tbbutton Ext.Toolbar.Button按钮tbfill Ext.Toolbar.Fill文件tbitem Ext.Toolbar.Item工具条项目tbseparator Ext.Toolbar.Separator工具栏分隔符tbspacer Ext.Toolbar.Spacer工具栏空白tbsplit Ext.Toolbar.SplitButton 工具栏分隔按钮tbtext Ext.Toolbar.TextItem工具栏文本项表单及字段组件包含：---------------------------------------form Ext.FormPanel Form面板checkbox Ext.form.Checkbox checkbox录入框combo boBox combo选择项datefield Ext.form.DateField日期选择项field Ext.form.Field表单字段fieldset Ext.form.FieldSet表单字段组hidden Ext.form.Hidden 表单隐藏域htmleditor Ext.form.HtmlEditor html编辑器numberfield Ext.form.NumberField数字编辑器radio Ext.form.Radio单选按钮textarea Ext.form.TextArea区域文本框textfield Ext.form.TextField表单文本框timefield Ext.form.TimeField时间录入项trigger Ext.form.TriggerField触发录入项Ext.Panel API翻译activeItem : String/Number用于设置当前活动的子组件，取值为此子组件的序号或者是id。

devexpress treelist的用法

devexpresstreelist的用法一、概述DevExpressTreelist控件是一款强大的TreeList控件，它提供了丰富的功能和灵活的配置选项，可以方便地展示和管理列表数据。

在DevExpress控件库中，Treelist控件适用于各种应用程序，如项目管理、文件系统、数据库管理等。

二、基本用法1.添加控件到窗体：在窗体设计器中，将DevExpressTreelist控件拖放到窗体上。

2.配置数据源：使用Treelist控件的数据源属性，设置要展示的数据。

可以连接数据库、读取数据文件或使用数据集对象作为数据源。

3.配置列：通过设置列属性，可以自定义列的显示方式、排序规则和数据类型。

4.展开和折叠节点：使用鼠标或键盘，可以展开和折叠TreeList控件中的节点，以查看更多细节。

5.搜索和过滤：Treelist控件提供了搜索和过滤功能，可以快速定位所需数据。

三、常用操作1.添加和删除节点：可以使用手动方式或编程方式，添加和删除TreeList控件中的节点。

2.编辑节点数据：在TreeList控件中选中节点后，可以编辑节点的数据。

3.复制和移动节点：可以使用复制和移动功能，方便地复制和转移节点。

4.排序和筛选：通过设置排序规则和筛选条件，可以按照指定方式展示TreeList控件中的数据。

四、高级用法1.自定义外观：通过设置TreeList控件的外观属性，可以自定义节点的样式、颜色、字体等。

2.实现自定义操作：可以使用事件处理程序或编程方式，实现自定义的操作，如节点展开时的动画效果、节点的拖拽和放置等。

3.集成其他控件：可以将Treelist控件与其他DevExpress控件集成，实现更复杂的功能和界面。

五、示例代码以下是一个简单的示例代码，展示如何使用DevExpressTreelist控件展示数据：```csharp//创建TreeList控件并设置数据源TreeList1.DataSource=myDataSet;//配置列属性TreeList1.Columns["Column1"].Visible=true;TreeList1.Columns["Column2"].Visible=false;TreeList1.Columns["Column3"].DataFormatString="integer";//展开节点时执行自定义操作TreeList1.BeginInit();TreeList1.Nodes["Node1"].BeginEdit();TreeList1.Events.NodeAfterCheck+=newDevExpress.XtraTreeList.NodeAft erCheckEventHandler(TreeList1_NodeAfterCheck);TreeList1.EndInit();//实现自定义操作代码voidTreeList1_NodeAfterCheck(objectsender,DevExpress.XtraTreeList.N odeAfterCheckEventArgse){//处理节点选中事件，根据需要执行相应操作}```六、总结DevExpressTreelist控件是一款功能强大的TreeList控件，提供了丰富的功能和灵活的配置选项。

Extjs控件属性

Ext.form.TimeField:配置项：maxValue：列表中允许的最大时间maxText：当时间大于最大值时的错误提示信息minValue：列表中允许的最小时间minText：当时间小于最小值时的错误提示信息increment：两个相邻选项间的时间间隔，默认为15分钟format：显示格式，默认为“g:i A”。

一般使用“H:i:s”H：带前缀0的24小时i：带前缀0的分钟s：带前缀0的秒invalidText：当时间值非法时显示的提示信息altFormats：多个时间输入格式组成的字符串，不同的格式之间使用“|”进行分割Ext.form.FieldSetanimCollapse：动画折叠，默认为falsecheckboxToggle：设置是否显示字段集的checkbox选择框，默认为falsecheckboxName：指定字段集中用于展开或隐藏字段集面板的checkbox的名字，该属性只有在checkboxToggle为true时生效labelWidth：字段标签的宽度，可以级联到子容器layout：布局，默认为formExt.form.DateFiledmaxValue：允许选择的最大日期maxText：当日期大于最大值时的错误提示信息minValue：允许选择的最小时间minText：当日期小于最小值时的错误提示信息format：日期显示格式，默认为“m/d/y”，一般使用“Y-m-d”Y：四位年份m：带前缀0的月份d：带前缀0的日期y：两位年份n：不带前缀0的月份j：不带前缀0的日期w：星期的数字，0表示星期日，1代表星期一showToday：是否显示今天按钮，默认为truealtFormats：多个日期输入格式组成的字符串，不同的格式之间使用“|”进行分割，默认值为'm/d/Y|n/j/Y|n/j/y|m/j /y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d'disabledDates：禁止选择的日期组成的数组disabledDatesText：选择禁选日期时显示的提示信息disabledDays：禁止选择的星期组成的数组，0代表星期日，1代表星期一disabledDaysText：选择禁选星期时显示的提示信息invalidText：当日期值非法时显示的提示信息方法：getValue()：取得日期值boBoxdisplayField：被显示在下拉框中的字段名editable：是否可编辑，默认为trueforceSelection：输入值是否严格为待选列表中存在的值。

extjs selectpath 用法

extjs selectpath 用法`selectPath` 是ExtJS 框架中TreePanel 组件的一个方法，用于选择指定节点的路径。

该方法的主要目的是展开树并选择指定节点，以便用户可以在树中看到特定节点的路径。

以下是`selectPath` 方法的基本用法：```javascripttreePanel.selectPath(path, field, separator, callback, scope);```参数说明：1. `path`（必需）：要选择的节点的路径，可以是字符串或数组。

如果是字符串，节点路径应该用分隔符（由`separator` 参数指定）分隔。

如果是数组，每个元素代表路径中的一个节点。

2. `field`（可选）：指定用于匹配路径的字段，默认为树节点的`text` 字段。

3. `separator`（可选）：用于分隔路径的字符串，默认为`/`。

4. `callback`（可选）：在选择路径完成后要调用的回调函数。

5. `scope`（可选）：回调函数的作用域。

以下是一个简单的例子：```javascript// 假设有一个TreePanel 实例treePanelvar treePanel = Ext.create('Ext.tree.Panel', {// 配置项...root: {// 树的根节点配置...},// 其他配置项...});// 调用selectPath 方法选择路径treePanel.selectPath('/root/node1/node2', 'text', '/', function (success, node) { if (success) {console.log('Path selected successfully!');} else {console.log('Path selection failed.');}}, this);```在上面的例子中，`selectPath` 方法将展开树并选择路径为"/root/node1/node2" 的节点。

vuetree组件props用法

vuetree组件props用法Vue Tree组件是一种用于显示树形结构数据的组件，它可以用于构建树形导航菜单、文件夹结构、分类目录等等。

在使用Vue Tree组件时，我们可以通过props属性来传递数据和配置选项，以实现不同的效果和功能。

本文将详细介绍Vue Tree组件的props用法，并解释每个props属性的作用和用法。

1. data：树形结构数据- 类型：Array-默认值：[]- 描述：用于传递树形结构数据，数据的格式需要符合组件要求的规范。

每个节点对象应包含一些必需的属性，如id、label和children等。

例子如下：```data:id: 1,label: '节点1',children:id: 2,label: '子节点1'},id: 3,label: '子节点2'}},id: 4,label: '节点2'}```2. key-prop：节点唯一标识字段名- 类型：String- 默认值：'id'- 描述：指定数据中用于唯一标识节点的字段名。

默认情况下，每个节点对象的id属性用作唯一标识。

如果数据中没有id字段，可以通过设置key-prop来指定其他字段作为节点的唯一标识字段。

3. node-label-prop：节点显示文本字段名- 类型：String- 默认值：label- 描述：指定数据中用于显示节点文本的字段名。

默认情况下，每个节点对象的label属性用作节点显示的文本。

如果数据中没有label字段，可以通过设置node-label-prop来指定其他字段作为节点的显示文本字段。

4. node-children-prop：节点子节点字段名- 类型：String- 默认值：'children'- 描述：指定数据中用于表示节点子节点的字段名。

默认情况下，每个节点对象的children属性用作节点的子节点。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

Extjs tree的相关组件及属性Ext.tree.TreePanel 主要配置项：root：树的根节点。

rootVisible：是否显示根节点，默认为true。

useArrows：是否在树中使用Vista样式箭头，默认为false。

lines：是否显示树线，默认为true。

loader：树节点的加载器，默认为Ext.tree.TreeLoader。

selModel：树的选择模式，默认为Ext.tree.DefaultSelectionModel。

pathSeparator：树节点路径的分隔符，默认为“/”。

singleExpand：是否一次只展开树中的一个节点，默认为true。

requestMethod：请求方法，可选值有POST、GET。

containerScroll：是否将树形面板注册到滚动管理器ScrollManager中。

主要方法：collapseAll()：收缩所有树节点expandAll()：展开所有树节点getRootNode()：获取根节点getNodeById(String id)：获取指定id的节点expand( [Boolean deep], [Boolean anim], [Function callback], [Object scope] )expandPath( String path, [String attr], [Function callback] )getChecked( [String attribute], [TreeNode startNode] ) selectPath( String path, [String attr], [Function callback] ) getSelectionModel()：Ext.data.Node主要配置项：id：节点idleaf：当前节点是否为叶子节点主要属性：id：节点idattributes：节点属性的集合parentNode：当前节点的父节点childNodes：当前节点所有子节点组成的数组firstChild：当前节点的第一个直接子节点，如果没有则为null值lastChild：当前节点的最后一个直接子节点，如果没有则为null值nextSibling：当前节点的下一个兄弟节点，如果没有则为null值previousSibling：当前节点的前一个兄弟节点，如果没有则为null值主要方法：appendChild( Node/Array node )：追加新的子节点bubble( Function fn, [Object scope], [Array args] )：从当前节点开始向上迭代调用指定函数，如果指定函数返回false 则将终止迭代。

args：传入函数中的参数，默认为当前节点cascade( Function fn, [Object scope], [Array args] )：从当前节点开始向下迭代调用指定函数，如果指定函数返回false 则将终止迭代。

contains( Node node )：当前节点是否包含指定子节点。

eachChild( Function fn, [Object scope], [Array args] )：迭代当前节点的所有子节点调用指定函数，如果指定函数返回false则将终止迭代。

findChild( String attribute, Mixed value )：查找具有指定属性的第一个子节点。

findChildBy( Function fn, [Object scope] )：根据自定义函数查找第一个符合要求的子节点，如果自定义函数返回true 则说明匹配成功。

getDepth()：取得当前节点的深度，根节点的深度为0 getOwnerTree()：取得当前节点所在树。

getPath( [String attr] )：取得当前节点对应的路径，这个路径在程序中可用于展开或者选择节点。

attr：用于查找路径的属性，默认为节点id hasChildNodes()：是否有子节点indexOf( Node node )：取得指定子节点的索引值，未找到返回-1。

insertBefore( Node node, Node refNode )：在当前节点的指定子节点之前插入一个新的子节点。

node：要插入的新节点isAncestor( Node node )：判断指定节点是否为当前节点的父节点（可以是任何一级中的父节点）。

isFirst()：是否为父节点的第一个子节点。

isLast()：是否为父节点的最后一个子节点。

isLeaf()：是否为叶子节点。

item( Number index )：取得指定索引的子节点。

remove()：从父节点中删除当前节点。

removeChild( Node node )：删除当前节点的指定子节点。

replaceChild( Node newChild, Node oldChild )：用新的子节点替换当前节点的指定子节点。

sort( Function fn, [Object scope] )：用指定的排序函数为当前节点的子节点进行排序。

Ext.tree.TreeNode主要配置项：text：节点上的文本信息qtip：节点上的提示信息icon：节点图标对应的路径iconCls：应用到节点图标上的样式checked：当前节点的选择状态true：在节点前显示一个选中状态的复选框false：在节点前显示一个未选中状态的复选框不指定该值：不显示任何复选框href：节点的连接属性，默认为#hrefTarget：显示节点连接的目标框架editable：是否允许编辑，默认为trueexpanded：是否展开节点，默认为falsedisabled：是否禁用节点，默认为false singleClickExpand：是否通过单击方式展开节点allowChildren：是否允许当前节点具有子节点，默认为true expandable：当不含子节点时，是否总显示一个加减图标，默认为falseuiProvider：节点的UI类，默认为Ext.tree.TreeNodeUI主要属性：text：节点上的文本信息disabled：当前节点是否被禁用主要方法：collapse( [Boolean deep], [Boolean anim], [Function callback], [Object scope] )：收缩当前节点deep：是否级联收缩全部子节点collapseChildNodes( [Boolean deep] )：收缩所有子节点disable()：禁用当前节点enable()：启用当前节点ensureVisible( [Function callback], [Object scope] )：确保所有父节点都是展开的expand( [Boolean deep], [Boolean anim], [Function callback], [Object scope] )：展开当前节点expandChildNodes( [Boolean deep] )：展开所有子节点isExpanded()：当前节点是否展开isSelected()：当前节点是否被选中select()：选择当前节点setText( String text )：设置当前的文本toggle()：切换当前节点的展开和收缩状态unselect()：取消对当前节点的选择getUI()：取得节点的UI对象Ext.tree.AsyncTreeNode 主要配置项：loader：当前节点的树加载器，默认使用树中配置的树加载器主要方法：isLoaded()：当前节点是否已经加载数据reload( Function callback, [Object scope] )：重新加载节点数据，并调用回调函数Ext.tree.TreeNodeUI主要方法：getAnchor()：从节点的UI中获取焦点的元素getIconEl()：获取图标的元素getTextEl()：获取文本节点addClass( String/Array className )：removeClass( String/Array className )：hide()：show()：isChecked()：取得节点的选择状态，如果当前节点没有复选框则函数返回falsetoggleCheck( Boolean (optional) )：设置节点复选框的选择状态Ext.tree.DefaultSelectionModel是TreePanel的默认选择模式，该模式一次只能选择树中的一个节点。

主要方法：clearSelections()：清除对树中所有节点的选择getSelectedNode()：取得当前被选中的节点isSelected( TreeNode node )：节点是否被选中select( TreeNode node )：选中指定节点unselect( TreeNode node )：取消指定节点的选中状态selectNext()：选择当前被选节点的下一个节点selectPrevious()：选择当前被选节点的上一个节点Ext.tree.MultiSelectionModel是TreePanel的多选择模式，该模式一次可以选择树中的多个节点。

主要方法：clearSelections()：清除所有节点的选中状态getSelectedNodes()：取得被选节点组成的数组isSelected( TreeNode node )：节点是否被选中select( TreeNode node, [EventObject e], Boolean keepExisting )：选中指定节点unselect( TreeNode node )：取消指定节点的选中状态Ext.tree.TreeLoader提供了对子节点的延时加载功能，请求指定的URL地址，返回子节点数据，返回的数据格式如下：[ { id: 1, text: "node1", leaf: true, check: false }, { id: 2, text: "node2", children: [ { id: 3, text: "node3", leaf: true } ] } ] [ { id: 1, text: "node1", leaf: true, check: false }, { id: 2, text:"node2", children: [ { id: 3, text: "node3", leaf: true } ] }]树节点展开时，当前节点的id会作为请求参数被发送到服务器，在服务器可以通过node参数名进行获取。