ExtJS4樹

先看個簡單的效果圖:

AC0

拄子分類名稱操作

F

UU新區(qū)發(fā)在01」七子分史

排序四置昕口發(fā)知）101浮一子分類

埠子二,6新宅發(fā)在02添工亍分類二-三

存字三宜新國發(fā)樂）202添加于分類

?添R新分類

TreePanel是ExtJS中最多能的組件之一，它非常適合用于展示分

層的數(shù)據(jù)。TreePanel和GridPanel繼承自相同的基類，所以所

有從GridPanel能獲得到的特性、擴展、插件等帶來的好處，在

TreePanel中也同樣可以獲得。歹U、列寬調(diào)整、拖拽、渲染器、排

序、過濾等特性，在兩種組件中都是差不多的工作方式。

讓我們開始創(chuàng)建一個簡單的樹組件

Ext?create（'Ext.tree.Panel'{

renderTo:Ext?getBody(),

title:'SimpleTree',

width:150,

height:150j

root:{

text:'Root',

expanded:true.

children:

text:'Child1',

leaf:true

},

text:'Child2',

leaf:true

},

text:'Child3',

expanded:true,

children:

text:'Grandchild',

leaf:true

}

1

)

]

}

})；

運行效果如圖

SimpleTree

Root

莖IChild1

富|Child2

日為Child3

/Grandchild

這個TreePanel.直接渲染在documentbody上，我們定義了一個

默認展開的根節(jié)點，根節(jié)點有三個子節(jié)點，前兩個子節(jié)點是葉子節(jié)點,

這意味著他們不能擁有自己的子節(jié)點了，第三個節(jié)點不是葉子節(jié)點,

它有一個子節(jié)點。每個節(jié)點的text屬性用來設置節(jié)點上展示的文字。

TreePanel內(nèi)部使用TreeStore存儲數(shù)據(jù)。上面的例子中使用了

root配置項作為使用store的捷徑。如果我們單獨指定store,代碼

像這樣：

varstore=Ext.create('Ext.data.TreeStore'{

root:{

text:'Root]

expanded:true,

children:

text:'Child1',

leaf:true

),

{

text:'Child2',

leaf:true

},

???

]

}

})；

Ext.create('Ext.tree.Panel'{

title:'SimpleTree',

store:store,

???

});

TheNodeInterface節(jié)點接口

上面的例子中我們在節(jié)點上設定了兩三個不同的屬性，但是節(jié)點到底

是什么？前面提到,TreePanel綁定了一個TreeStore,Store在ExtJS

中的作用是管理Model實例的集合。樹節(jié)點是用Nodeinterface裝

飾的簡單的模型實例。用Nodeinterface裝飾Model使Model獲得

了在樹中使用需要的方法、屬性、字段。下面是個樹節(jié)點對象在開發(fā)

工具中打印的截圖

▼Ext.Class.Class.newClass

?childNodes:Array(3]

▼data:Object

allowDrag:true

allowDrop:true

checked:null

cis:""

depth:1

expanded:true

href:

hrefTarget:u"

iconCls:""

id:M"

isFirst:false

isLast:true

leaf:false

loaded:true

qtip:"M

qtitle:,,M

root:false

text:"Parent1"

?_proto_:Object

dirty:true

?events:Object

?firstChild:Ext.Class.Class.newClass

id:"Ext.data.Store.ImplicitModel-ext-genl0e4-ext-record-4"

internalld:"ext-record-4M

?lastchild:Ext.Class.Class.newClass

?modified:Object

nextSibling:null

?parentNode:Ext.Class.Class.newClass

phantom:true

?previousSibling:Ext.Class.Class.newClass

?store:Ext.Class.Class.newClass

?_proto_:Ctotype

關于節(jié)點的方法、屬性等，請查看API文檔（ps.每一個學習ExtJS

的開發(fā)者都應該仔細研讀API文檔，這是最好的教材）

Visuallychangingyourtree外觀定制

先嘗試一些簡單的改動。把useArrows設置為true,TreePanel

就會隱藏前導線使用箭頭表示節(jié)點的展開

Arrows

,百ExtJS

■日button

置Button.js

SCyde.js

虐|Split.js

/6container

若ButtonGroup.js

方Container.js

總Viewport.js

Dd

D

1m

，

>C_lcomponent

0L_icontainer

設置rootVisible屬性為false,根節(jié)點就會被隱藏起來:

曰6button

目Button.js

ECycle.js

BSplit.js

IdtJcontainer

當ButtoiiGrQup.jb

當Container.js

WViewport.js

田口dd

田口form

田Qgrid

日A)layout

田Ocomponent

田Ocontainer

出Qjmenu

Multiplecolumns多列

由于TreePanel也是從GridPanel相同的父類繼承的，因此實現(xiàn)

多列很容易。

vartree=Ext.create('Ext.tree.Panel'{

renderTo:Ext.getBody(),

title:'TreeGrid',

width:300,

height:150j

fields:「name]'description']〃注意這里

columns:[{

xtype:'treecolumn'

text:'Name：

datalndex:'name',

width:150,

sortable:true

},{

text:'Description',

datalndex:'description,,

flex:1,

sortable:true

}],

root:{

name:'Root',

description:'Rootdescription'

expanded:true,

children:[{

name:,Child1',

description:'Description1',

leaf:true

},{

name:'Child2',

description:'Description2',

leaf:true

}]

}

}）；

NameDescription

RootRootdescription

司Child1Description1

置Child2Description2

這里面的columns配置項期望得到一，個Ext.grid.column.Column

配置,就跟GridPanel一樣的。唯一的不同就是TreePanel需要至

少一個treecolumn歹ij,這種列是擁有tree視覺效果的，典型的Tree

Panel應該只有一列treecolumn。

fields配置項會傳遞給tree內(nèi)置生成的store用。datalndex是如

何跟列匹配的請仔細看上面例子中的name和description,其實

就是和每個節(jié)點附帶的屬性值匹配

如果不配置column,tree會自動生成一列treecolumn,并且它的

data工ndex是text,并且也自動隱藏了表頭，如果想顯示表頭，可

以用hideHeaders配置為false°(LZ注：看到這里extjs3和4的tree

已經(jīng)有了本質(zhì)的不同，extjs4的tree本質(zhì)上就是TreeGrid,只是在

只有一列的時候，展現(xiàn)形式為原來的TreePanel)

Addingnodestothetree添力口節(jié)點

tree的根節(jié)點不是必須在初始化時設定。后續(xù)再添加也可以：

vartree=Ext.create('Ext.tree.Panel');

tree.setRootNode({

text:'Root',

expanded:true,

children:[{

text:,Child1',

leaf:true

},{

text:?Child2',

leaf:true

}]

})；

盡管對于很小的樹只有默認幾個靜態(tài)節(jié)點的，這種直接在代碼里面配

置的方式很方便，但是大多數(shù)情況tree還是有很多節(jié)點的。讓我們

看一下如何通過程序添加節(jié)點。

varroot=tree.getRootNode();

varparent=root.appendChild({

text:'Parent1'

}）；

parent.appendChild({

text:'Child3',

leaf:true

})；

parent.expand();

每一個不是葉節(jié)點的節(jié)點都有一個appendChild方法，這個方法接

收一個Node類型，或者是Node的配置參數(shù)的參數(shù)，返回值是新添

加的節(jié)點對象。上面的例子中也調(diào)用了expand方法展開這個新的父

節(jié)點。

Appendingchildren

□QjRoot

匡1Child1

ISChild2

d曰Parent1

莖|Child3

上面的例子利用內(nèi)聯(lián)的方式，亦可:

varparent=root.appendChild({

text:'Parent1',

expanded:true,

children:[{

text:1Child3：

leaf:true

}]

})；

有時我們期望將節(jié)點插入到一個特定的位置，而不是在最末端添加。

除了appendChild方法，Ext.data.Nodeinterface還提供了

insertBefore和insertchild方法。

varchild=parent.insertchild(0^{

text:'Child2.5',

leaf:true

})；

parent.insertBefore({

text:'Child2.75',

leaf:true

},child.nextSibling);

insertchild方法需要一個節(jié)點位置，新增的節(jié)點將會插入到這個

位置。insertBefore方法需要一個節(jié)點的引用，新節(jié)點將會插入到

這個節(jié)點之前。

Insertingchildren

BRoot

雯］Child1

3Child2

JParent1

HChild2.5

國Child2.75

3Child3

Nodeinterface也提供了幾個可以引用到其他節(jié)點的屬性

?nextSibling

?previousSibling

?parentNode

?lastchild

?firstChild

?childNodes

LoadingandSavingTreeDatausingaProxy加載和保存樹上的

數(shù)據(jù)

加載和保存樹上的數(shù)據(jù)比處理扁平化的數(shù)據(jù)要復雜一點，因為每個字

段都需要展示層級關系，這一章將會解釋處理這一復雜的工作。

NodeinterfaceFields

使用tree數(shù)據(jù)的時候，最重要的就是理解Nodeinterface是如何工

作的。每個tree節(jié)點都是一個用Nodeinterface裝飾的Model實例。

假設有個PersonModel,它有兩個字段id和name：

Ext.define('Person',{

extend:'Ext.data.Model',

fields:

{name:'id"type:'int'},

{name:Fame',type:'string'}

]

})；

如果只做這些，PersonModel還只是普通的Model,如果取它的字

段個數(shù)：

console.log(Person.prototype.fields.getCount());//輸

出‘2,

但是如果將PersonModel應用到Treestore之中后，就會有些變化:

varstore=Ext.create('Ext.data.TreeStore'{

model:'Person',

root:{

name:'Phil'

)

));

console.log(Person.prototype.fields.getCount());//4俞

出'24'

被Treestore使用之后，Person多\22個字段。所有這些字段都

是在Nodeinterface中定義的，TreeStore初次實例化Person的時

候，這些字段會被加入到Person的原型鏈中。

那這22個字段都是什么，有什么用處？讓我們簡要的看一下

Node工nterface,它用如下字段裝飾Model,這些字段都是存儲tree

相關結構和狀態(tài)的：

{name:'parentld'>type:idType^defaultvalue:

null},

{name:'index',type:'int'defaultvalue:null.

persist:false),

{name:'depth'type:'int'defaultvalue:0,

persist:false),

{name:'expanded',type:'bool"defaultvalue:

false,persist:false},

{name:'expandable'type:‘bool'.defaultvalue:true.

persist:-False},

{name:'checked',type:'auto'.defaultvalue:null,

persist:false),

{name:'leaf'ytype:'bool'ydefdultVdlue:

false),

{name:'cis',type:'string'defaultvalue:null,

persist:false),

{name:'iconCls'type:'string'defaultvalue:null.

persist:false},

{name:‘icon',type:'string'defaultvalue:null,

persist:false),

{name:‘root'.type:'boolean,defaultvalue:

false,persist:false}.

{name:'isLast',type:'boolean'defaultvalue:

false,persist:false},

{name:'isFirst'type:'boolean'defaultvalue:

false,persist:falsej^

{name:'allowDrop',type:'boolean'defaultvalue:true^

persist:false),

{name:'dllowDrdg'ytype:'boolean'ydefaultvalue:true,

persist:false),

{name:'loaded',type:'boolean*4defaultvalue:

false,persist:false},

{name:'loading',type:'boolean'defaultvalue:

false,persist:false},

{name:'href',type:'string'defaultvalue:null^

persist:false),

{name:'hrefTarget'type:'string'defaultvalue:null,

persist:false),

{name:'qtip'ytype:'string',defaultvalue:null^

persist:false),

{name:'qtitle',type:'string'defaultvalue:null?

persist:-False},

{name:'children'type:'auto'defaultvalue:null,

persist:false)

NodeinterfaceFieldsareReservedNames節(jié)點接口的字段都是

保留字

有一點非常重要，就是上面列舉的這些字段都應該當作保留字段。例

如，Model中就不允許有一個字段叫做parent工d了，因為當Model

用在Tree上時，Model的字段會覆蓋Nodeinterface的字段。除非

這里有個合法的需求要覆蓋Nodeinterface的字段的持久化屬性。

PersistentFieldsvsNon-persistentFieldsandOverridingthe

PersistenceofFields持久化字段和非持久化字段，如何覆蓋持久

化屬性

大多數(shù)Nodeinterface的字段都默認是persist:false不持久化的。

非持久化字段在TreeStore做保存操作的時候不會被保存。大多數(shù)情

況默認的配置是符合需求的，但是如果真的需要覆蓋持久化設置，下

面展示了如何覆蓋持久化配置。當覆蓋持久化配置的時候，只改變

presist屬性，其他任何屬性都不要修改

//overridingthepersistenceofNodeinterfacefieldsin

aModeldefinition

Ext.define(*Person',{

extend:'Ext.data.Model,,

fields:[

//Personfields

{name:'id]type:'inf},

{name:'name；type:'string'}

//overrideanon-persistentNodeinterfacefield

tomakeitpersistent

{name:'iconCls'}type:'string'defaultvalue:

null,persist:true},

]

}）；

讓我們深入的看一下Nodeinterface的字段，列舉一下可能需要覆蓋

persist屬性的情景。下面的每個例子都假設使用了ServerProxy

除非提示不使用。（注：這需要有一些server端編程的知識）

默認持久化的：

.parent工d-用來指定父節(jié)點的id,這個字段應該總是持久化,

不要覆蓋它

.leaf-用來指出這個節(jié)點是不是葉子節(jié)點，因此決定了節(jié)點是

不是可以有子節(jié)點，最好不要改變它的持久化設置

默認不持久化的：

.index-用來指出當前節(jié)點在父節(jié)點的所有子節(jié)點中的位置，

當有節(jié)點插入或者移除，它的所有鄰居節(jié)點的位置都會更新，如

果需要，可以用這個屬性去持久化樹節(jié)點的排列順序。然而如果

服務器端使用另外的排序方法,最好把這個字段保留為非持久化

的，當使用WebStorageProxy作為存儲，且需要保留節(jié)點順

序，那一定要設置為持久化的。如果使用了本地排序，建議設置

非持久化，因為本地排序會改變節(jié)點的index屬性

?depth用來存儲節(jié)點在樹中的層級，如果server需要保存節(jié)點

層級請開啟持久化。使用WebStorageProxy的時候建議不要

持久化，會多占用存儲空間。

?checked如果在tree使用checkbox特性，看業(yè)務需求來開啟

持久化

?expanded存儲節(jié)點的展開收起狀態(tài)，要不要持久化看業(yè)務需求

?expandable內(nèi)部使用，不要變更持久化配置

.cis用來給節(jié)點增加css類，看業(yè)務需求

?iconCls用來給節(jié)點icon增加css類，看業(yè)務需求

?icon用來自定義節(jié)點，看業(yè)務需求

?root對根節(jié)點的引用，不要變動配置

.isLast標識最后一個節(jié)點，此配置一般不需要變動

?isFirst標識第一個節(jié)點，此配置一般不需要變動

?allowDrop用來標識可放的節(jié)點，此配置不要動

?allowDrag用來標識可拖的節(jié)點，此配置不要動

?loaded用來標識子節(jié)點是否加載完成，此配置不要動

?loading用來標識子節(jié)點是否正在加載中，此配置不要動

.href用來指定節(jié)點鏈接，此配置看業(yè)務需求變動

?hrefTarget節(jié)點鏈接的target,此配置看業(yè)務需求變動

?qtip指定tooltip文字，此配置看業(yè)務需求變動

?qtitle指定tooltip的title,此配置看一業(yè)務需求變動

?children內(nèi)部使用，不要動

LoadingData加載數(shù)據(jù)

有兩種加載數(shù)據(jù)的方式。一次性加載全部節(jié)點和分步加載，當節(jié)點過

多時，一次加載會有性能問題，而且不一定每個節(jié)點都用到。動態(tài)分

步加載是指在父節(jié)點展開的時候加載子節(jié)點。

LoadingtheEntireTree一次加載

Tree的內(nèi)部實現(xiàn)是只有節(jié)點展開的時候加載數(shù)據(jù)。然而全部的層級

關系可以通過一個嵌套的數(shù)據(jù)結構一次全部加載，只要配置root節(jié)

點是展開的即可

Ext.define('Person',{

extend:'Ext.data.Model,,

fields:[

{name:'id"type:'int'},

{name:1name'type:'string'}

proxy:{

type:'ajax',

api:{

create:'createPersons,,

read:'readPersons',

update:'updatePersons'

destroy:'destroyPersons

)

}

))；

varstore=Ext.create('Ext.data.TreeStore'

model:'Person',

root:{

name:'People'

expanded:true

}

})；

Ext.create('Ext.tree.Panel',{

renderTo:Ext.getBody(),

width:300,

height:200j

title:'People,,

store:store.

columns:[

{xtype:'treecolumn'header:'Name'datalndex:

'name',flex:1}

]

}）；

假設readPersons返回數(shù)據(jù)如下

{

"success":true,

"children":[

{"id":1,"name":"Phil","leaf":true},

{"id":2,"name":"Nico","expanded":true,

"children":[

{"id":3,"name":"Mitchell","leaf":