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,否則這