Extjs4.1中treepanel的全部高级操作教程

1、ExtJS4树先看个简单的效果图:新闻笈布jQ新冈发衣on琼协子牛类弹序二/巳新诩斎弃02松t亍分类琏诉即斷廿类琛扣亍甘晏TreePanel是ExtJS中最多能的组件之一，它非常适合用于展示分层的数据。TreePanel和GridPanel继承自相同的基类，所以所有从GridPanel能获得到的特性、扩展、插件等带来的好处，在TreePanel中也同样可以获得。列、列宽调整、拖拽、渲染器、排序、过滤等特性，在两种组件中都是差不多的工作方式。让我们开始创建一个简单的树组件Ext.create(Ext.tree.Panel,renderTo:Ext.getBody(),title:SimpleTr

2、ee,width:150,height:150,root:text:Root,expanded:true,children:text:Child1,leaf:true,text:Child2,leaf:true,););text:Child3,expanded:true,children:text:Grandchild,leaf:true);运行效果如图SimpleTreeJ_IRoot二?Cliild1|Child2d_nciiiida二耳Grandchild这个TreePanel直接渲染在document.body上，我们定义了一个默认展开的根节点，根节点有三个子节点，前两个子节点是叶子节

3、点这意味着他们不能拥有自己的子节点了，第三个节点不是叶子节点它有一个子节点。每个节点的text属性用来设置节点上展示的文字。TreePanel内部使用TreeStore存储数据。上面的例子中使用了root配置项作为使用store的捷径。如果我们单独指定store，代码像这样：varstore=Ext.create(Ext.data.TreeStore,root:text:Root,expanded:true,children:text:leaf:,text:leaf:,Child1,trueChild2,trueExt.create(Ext.tree.Panel,title:SimpleTre

4、e,store:store,);TheNodeInterface节点接口上面的例子中我们在节点上设定了两三个不同的属性，但是节点到底是什么?前面提到,TreePanel绑定了一个TreeStore,Store在ExtJS中的作用是管理Model实例的集合。树节点是用NodeInterface装饰的简单的模型实例。用NodeInterface装饰Model使Model获得了在树中使用需要的方法、属性、字段。下面是个树节点对象在开发工具中打印的截图TExt.Class.匚邑w匚l日5占chilJN&des:Array3Tdata:ObjectallowDrac:七ru亡allowDrap:true

5、checkec:nullcis:(i&pth:1expandec:truehref:汕hrefTarget:Micontl:叩id:MMisFirst;falseisLast:trueleaf:falseladec:trueqtip:qtitle:MMrant:Isetext:Parent1卜_proto_;Objectdirtzy:trueevents:DbjectFfirstChild;Ext亡lass已w匚L日5$ic:Ext.data.Store.ImplicitModal-yt-ger,iL004-ext-recDrd-411internalld:ext-recor(f-4Mlast

6、Child:Ext.Class.Class,new匚modified:DbjectnextSibling;nullXparentNade:Ext.Class.Class.r已w匚lassph吕ntiDd：truep亡vioLi,Sibling;Ext亡las.tTmss.ntwdm吕wstore:Ext.匚lais.Class.newClass_prata_:匚lais.register卩eproc巴ssor-|3rDt2i3t:ypi2关于节点的方法、属性等，请查看API文档（ps.每一个学习ExtJS的开发者都应该仔细研读API文档，这是最好的教材）Visuallychangingyour

7、tree外观定制先尝试一些简单的改动。把useArrows设置为true，TreePanel就会隐藏前导线使用箭头表示节点的展开ArrowsjSiExtjgJ.button二司-HCydajsUSplit.jsJcontainer=71日LttonG唱Lp,js二7Containers-z|Viovpoit.jsQdd_JformCgridJ_JlavLft._lc&mfxinerit卜口container设置rootVisible属性为false,根节点就会被隐藏起来:rootVlsihke:faksclirves:fakscU_ibutton二勺Button.js=3Cycle.js二6S

8、plit.jsc）_cc-nlsinerEBLittonGroLjp.js二：Centsiner.js二?Vi-ewport.js田口dd（+）Jformct）口griddi_i1-ayQLtdi）l_Icomponent（+）i_lcc-ntairw-rijj口menuMultiplecolumns多列由于TreePanel也是从GridPanel相同的父类继承的，因此实现多列很容易。vartree=Ext.create(Ext.tree.Panel,renderTo:Ext.getBody(),title:TreeGrid,width:300,height:150,fields:name,

9、description,/注意这里columns:xtype:treecolumn,text:Name,dataIndex:name,width:150,sortable:true,text:Description,dataIndex:description,flex:1,sortable:true,root:name:Root,description:Rootdescription,expanded:true,children:name:Child1,description:Description1,leaf:true,name:Child2,description:Description2

10、,leaf:true);TreeGrklMameDescriptionJ.Rtxjtfcootdescription二PChiId1Descripticn1=3ChiId2Dtscription2这里面的columns配置项期望得到一个Ext.grid.column.Column配置，就跟GridPanel一样的。唯一的不同就是TreePanel需要至少一个treecolumn列，这种列是拥有tree视觉效果的，典型的TreePanel应该只有一列treecolumn。fields配置项会传递给tree内置生成的store用。datalndex是如何跟列匹配的请仔细看上面例子中的name和de

11、scription,其实就是和每个节点附带的属性值匹配如果不配置column，tree会自动生成一列treecolumn，并且它的datalndex是text，并且也自动隐藏了表头，如果想显示表头，可以用hideHeaders配置为false。(LZ注:看到这里extjs3和4的tree已经有了本质的不同，extjs4的tree本质上就是TreeGrid，只是在只有一列的时候，展现形式为原来的TreePanel)Addingnodestothetree添加节点tree的根节点不是必须在初始化时设定。后续再添加也可以:vartree=Ext.create(Ext.tree.Panel);tree

12、.setRootNode(text:Root,expanded:true,children:text:Child1,leaf:true,text:Child2,leaf:true);尽管对于很小的树只有默认几个静态节点的，这种直接在代码里面配置的方式很方便，但是大多数情况tree还是有很多节点的。让我们看一下如何通过程序添加节点。varroot=tree.getRootNode();varparent=root.appendChild(text:Parent1);parent.appendChild(text:Child3,leaf:true);parent.expand();每一个不是叶节点

13、的节点都有一个appendChild方法，这个方法接收一个Node类型，或者是Node的配置参数的参数，返回值是新添加的节点对象。上面的例子中也调用了expand方法展开这个新的父节点。AppendingchildrenT_IRoothSchildi=3Child2d_lParent1Schida上面的例子利用内联的方式，亦可：varparent=root.appendChild(text:Parent1,expanded:true,children:text:Child3,leaf:true);有时我们期望将节点插入到一个特定的位置，而不是在最末端添加除了appendChild方法，Ext.

14、data.Nodelnterface还提供了insertBefore和insertChild方法。varchild=parent.insertChild(0,text:Child2.5,leaf:true);parent.insertBefore(text:Child2.75,leaf:true,child.nextSibling);insertChild方法需要一个节点位置，新增的节点将会插入到这个位置。insertBefore方法需要一个节点的引用，新节点将会插入到这个节点之前。Ins-ertingchiklrcn卍_IRootChild-1=3chiltf2d_lParent1=z1Ch

15、iId2.5勻ChiIJBChiId3NodeInterface也提供了几个可以引用到其他节点的属性nextSiblingpreviousSiblingparentNodelastChildfirstChildchildNodesLoadingandSavingTreeDatausingaProxy加载和保存树上的数据加载和保存树上的数据比处理扁平化的数据要复杂一点，因为每个字段都需要展示层级关系，这一章将会解释处理这一复杂的工作。NodeInterfaceFields使用tree数据的时候，最重要的就是理解NodeInterface是如何工作的。每个tree节点都是一个用Nodelnterf

16、ace装饰的Model实例。假设有个PersonModel,它有两个字段id和name：Ext.define(Person,extend:Ext.data.Model,fields:name:id,type:int,name:id,type:int,name:name,type:string);如果只做这些，PersonModel还只是普通的Model,如果取它的字段个数：console.log(Ptotype.fields.getCount();/输出2但是如果将PersonModel应用到Treestore之中后，就会有些变化:varstore=Ext.create(Ex

17、t.data.TreeStore,model:Person,root:name:Philpersist:false,persist:false,);console.log(Ptotype.fields.getCount();/输出24被TreeStore使用之后，Person多了22个字段。所有这些字段都是在Nodelnterface中定义的，TreeStore初次实例化Person的时候，这些字段会被加入到Person的原型链中。那这22个字段都是什么，有什么用处？让我们简要的看一下Nodelnterface，它用如下字段装饰Model,这些字段都是存储tree相关结构和状

18、态的：name:parentId,type:idType,defaultValue:null,name:index,type:int,defaultValue:null,persist:false,name:depth,type:int,defaultValue:0,name:expanded,type:bool,defaultValue:name:expanded,type:bool,defaultValue:false,persist:false,false,persist:false,name:expanded,type:bool,defaultValue:name:expanded,t

19、ype:bool,defaultValue:false,persist:false,false,persist:false,false,persist:false,name:expandable,type:bool,defaultValue:true,persist:false,name:checked,persist:false,name:leaf,false,name:cls,persist:false,name:iconCls,persist:false,name:icon,persist:false,name:root,type:auto,type:bool,type:string,t

20、ype:string,type:string,defaultValue:null,defaultValue:defaultValue:null,defaultValue:null,defaultValue:null,type:boolean,defaultValue:name:isLast,type:boolean,defaultValue:name:isLast,type:boolean,defaultValue:persist:false,persist:false,name:isLast,type:boolean,defaultValue:name:isLast,type:boolean

21、,defaultValue:persist:false,persist:false,false,persist:false,name:isFirst,type:false,persist:false,name:allowDrop,type:persist:false,name:allowDrag,type:persist:false,name:loaded,type:false,persist:false,name:loading,type:false,persist:false,name:href,type:persist:false,boolean,defaultValue:boolean

22、,defaultValue:true,boolean,defaultValue:true,boolean,defaultValue:boolean,defaultValue:string,defaultValue:null,name:hrefTarget,type:string,defaultValue:null,name:qtip,persist:false,type:string,defaultValue:null,name:qtitle,type:string,defaultValue:null,persist:false,name:children,type:auto,defaultV

23、alue:null,persist:falseNodeInterfaceFieldsareReservedNames节点接口的字段都是保留字有一点非常重要，就是上面列举的这些字段都应该当作保留字段。例如，Model中就不允许有一个字段叫做parentId了，因为当Model用在Tree上时，Model的字段会覆盖NodeInterface的字段。除非这里有个合法的需求要覆盖NodeInterface的字段的持久化属性。PersistentFieldsvsNon-persistentFieldsandOverridingthePersistenceofFields持久化字段和非持久化字段，如何覆

24、盖持久化属性大多数NodeInterface的字段都默认是persist:false不持久化的非持久化字段在TreeStore做保存操作的时候不会被保存。大多数情况默认的配置是符合需求的，但是如果真的需要覆盖持久化设置，下面展示了如何覆盖持久化配置。当覆盖持久化配置的时候，只改变presist属性，其他任何属性都不要修改/overridingthepersistenceofNodeInterfacefieldsinaModeldefinitionExt.define(Person,extend:Ext.data.Model,fields:/Personfieldsname:id,type:in

25、t,name:name,type:string/overrideanon-persistentNodeInterfacefieldtomakeitpersistentname:iconCls,type:string,defaultValue:null,persist:true,）;让我们深入的看一下NodeInterface的字段，列举一下可能需要覆盖persist属性的情景。下面的每个例子都假设使用了ServerProxy除非提示不使用。（注：这需要有一些server端编程的知识）默认持久化的：parentId-用来指定父节点的id,这个字段应该总是持久化，不要覆盖它leaf-用来指出这个节

26、点是不是叶子节点，因此决定了节点是不是可以有子节点,最好不要改变它的持久化设置默认不持久化的：index-用来指出当前节点在父节点的所有子节点中的位置，当有节点插入或者移除,它的所有邻居节点的位置都会更新,如果需要,可以用这个属性去持久化树节点的排列顺序。然而如果服务器端使用另外的排序方法,最好把这个字段保留为非持久化的，当使用WebStorageProxy作为存储，且需要保留节点顺序，那一定要设置为持久化的。如果使用了本地排序，建议设置非持久化，因为本地排序会改变节点的index属性depth用来存储节点在树中的层级，如果server需要保存节点层级请开启持久化。使用WebStoragePr

27、oxy的时候建议不要持久化，会多占用存储空间。checked如果在tree使用checkbox特性，看业务需求来开启持久化expanded存储节点的展开收起状态，要不要持久化看业务需求expandable内部使用，不要变更持久化配置cls用来给节点增加css类，看业务需求iconCls用来给节点icon增加css类，看业务需求icon用来自定义节点，看业务需求root对根节点的引用，不要变动配置isLast标识最后一个节点，此配置一般不需要变动isFirst标识第一个节点，此配置一般不需要变动allowDrop用来标识可放的节点，此配置不要动allowDrag用来标识可拖的节点，此配置不要动l

28、oaded用来标识子节点是否加载完成，此配置不要动loading用来标识子节点是否正在加载中，此配置不要动href用来指定节点链接，此配置看业务需求变动hrefTarget节点链接的target,此配置看业务需求变动qtip指定tooltip文字，此配置看业务需求变动qtitle指定tooltip的title,此配置看业务需求变动children内部使用，不要动LoadingData加载数据有两种加载数据的方式。一次性加载全部节点和分步加载，当节点过多时，一次加载会有性能问题，而且不一定每个节点都用到。动态分步加载是指在父节点展开的时候加载子节点。LoadingtheEntireTree一次加

29、载Tree的内部实现是只有节点展开的时候加载数据。然而全部的层级关系可以通过一个嵌套的数据结构一次全部加载，只要配置root节点是展开的即可Ext.define(Person,extend:Ext.data.Model,fields:name:id,type:int,name:name,type:string,proxy:type:ajax,api:create:createPersons,read:readPersons,update:updatePersons,destroy:destroyPersons);varstore=Ext.create(Ext.data.TreeStore,mo

30、del:Person,root:name:People,expanded:true);Ext.create(Ext.tree.Panel,renderTo:Ext.getBody(),width:300,height:200,title:People,store:store,columns:xtype:treecolumn,header:Name,dataIndex:name,flex:1);假设readPersons返回数据如下success:true,children:id:1,name:Phil,leaf:true,id:2,name:Nico,expanded:true,children:id:3,name:Mitchell,leaf:true,id:4,name:Sue,loaded:true最终形成的树就是这样需要注意的是：所有非叶子节点，但是又没有子节点的，例如上面图中的Sue，服务器端返回的数据必须是loaded属性设置为true,否则这