Extjs41中treepanel的全部高级操作教程

ExtJS4树

先看个简单的效果图:

AC0

拄子分类名称操作

F

UU新区发在01」七子分史

排序四置昕口发知）101浮一子分类

埠子二,6新宅发在02添工亍分类二-三

存字三宜新国发乐）202添加于分类

©添R新分类

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

层的数据。TreePanel和GridPanel继承自相同的基类，所以所

有从GridPanel能获得到的特性、扩展、插件等带来的好处，在

TreePanel中也同样可以获得。歹U、列宽调整、拖拽、渲染器、排

序、过滤等特性，在两种组件中都是差不多的工作方式。

让我们开始创建一个简单的树组件

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上，我们定义了一个

默认展开的根节点，根节点有三个子节点，前两个子节点是叶子节点,

这意味着他们不能拥有自己的子节点了，第三个节点不是叶子节点,

它有一个子节点。每个节点的text属性用来设置节点上展示的文字。

TreePanel内部使用TreeStore存储数据。上面的例子中使用了

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节点接口

上面的例子中我们在节点上设定了两三个不同的属性，但是节点到底

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

中的作用是管理Model实例的集合。树节点是用Nodeinterface装

饰的简单的模型实例。用Nodeinterface装饰Model使Model获得

了在树中使用需要的方法、属性、字段。下面是个树节点对象在开发

工具中打印的截图

▼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

关于节点的方法、属性等，请查看API文档（ps.每一个学习ExtJS

的开发者都应该仔细研读API文档，这是最好的教材）

Visuallychangingyourtree外观定制

先尝试一些简单的改动。把useArrows设置为true,TreePanel

就会隐藏前导线使用箭头表示节点的展开

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,根节点就会被隐藏起来:

曰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相同的父类继承的，因此实现

多列很容易。

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内置生成的store用。datalndex是如

何跟列匹配的请仔细看上面例子中的name和description,其实

就是和每个节点附带的属性值匹配

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

data工ndex是text,并且也自动隐藏了表头，如果想显示表头，可

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

已经有了本质的不同，extjs4的tree本质上就是TreeGrid,只是在

只有一列的时候，展现形式为原来的TreePanel)

Addingnodestothetree添力口节点

tree的根节点不是必须在初始化时设定。后续再添加也可以：

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

tree.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();

每一个不是叶节点的节点都有一个appendChild方法，这个方法接

收一个Node类型，或者是Node的配置参数的参数，返回值是新添

加的节点对象。上面的例子中也调用了expand方法展开这个新的父

节点。

Appendingchildren

□QjRoot

匡1Child1

ISChild2

d曰Parent1

茎|Child3

上面的例子利用内联的方式，亦可:

varparent=root.appendChild({

text:'Parent1',

expanded:true,

children:[{

text:1Child3：

leaf:true

}]

})；

有时我们期望将节点插入到一个特定的位置，而不是在最末端添加。

除了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方法需要一个节点位置，新增的节点将会插入到这个

位置。insertBefore方法需要一个节点的引用，新节点将会插入到

这个节点之前。

Insertingchildren

BRoot

雯］Child1

3Child2

JParent1

HChild2.5

国Child2.75

3Child3

Nodeinterface也提供了几个可以引用到其他节点的属性

•nextSibling

•previousSibling

•parentNode

•lastchild

•firstChild

•childNodes

LoadingandSavingTreeDatausingaProxy加载和保存树上的

数据

加载和保存树上的数据比处理扁平化的数据要复杂一点，因为每个字

段都需要展示层级关系，这一章将会解释处理这一复杂的工作。

NodeinterfaceFields

使用tree数据的时候，最重要的就是理解Nodeinterface是如何工

作的。每个tree节点都是一个用Nodeinterface装饰的Model实例。

假设有个PersonModel,它有两个字段id和name：

Ext.define('Person',{

extend:'Ext.data.Model',

fields:

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

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

]

})；

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

段个数：

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

相关结构和状态的：

{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节点接口的字段都是

保留字

有一点非常重要，就是上面列举的这些字段都应该当作保留字段。例

如，Model中就不允许有一个字段叫做parent工d了，因为当Model

用在Tree上时，Model的字段会覆盖Nodeinterface的字段。除非

这里有个合法的需求要覆盖Nodeinterface的字段的持久化属性。

PersistentFieldsvsNon-persistentFieldsandOverridingthe

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

化属性

大多数Nodeinterface的字段都默认是persist:false不持久化的。

非持久化字段在TreeStore做保存操作的时候不会被保存。大多数情

况默认的配置是符合需求的，但是如果真的需要覆盖持久化设置，下

面展示了如何覆盖持久化配置。当覆盖持久化配置的时候，只改变

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-用来指定父节点的id,这个字段应该总是持久化,

不要覆盖它

.leaf-用来指出这个节点是不是叶子节点，因此决定了节点是

不是可以有子节点，最好不要改变它的持久化设置

默认不持久化的：

.index-用来指出当前节点在父节点的所有子节点中的位置，

当有节点插入或者移除，它的所有邻居节点的位置都会更新，如

果需要，可以用这个属性去持久化树节点的排列顺序。然而如果

服务器端使用另外的排序方法,最好把这个字段保留为非持久化

的，当使用WebStorageProxy作为存储，且需要保留节点顺

序，那一定要设置为持久化的。如果使用了本地排序，建议设置

非持久化，因为本地排序会改变节点的index属性

•depth用来存储节点在树中的层级，如果server需要保存节点

层级请开启持久化。使用WebStorageProxy的时候建议不要

持久化，会多占用存储空间。

•checked如果在tree使用checkbox特性，看业务需求来开启

持久化

•expanded存储节点的展开收起状态，要不要持久化看业务需求

•expandable内部使用，不要变更持久化配置

.cis用来给节点增加css类，看业务需求

•iconCls用来给节点icon增加css类，看业务需求

•icon用来自定义节点，看业务需求

•root对根节点的引用，不要变动配置

.isLast标识最后一个节点，此配置一般不需要变动

•isFirst标识第一个节点，此配置一般不需要变动

•allowDrop用来标识可放的节点，此配置不要动

•allowDrag用来标识可拖的节点，此配置不要动

•loaded用来标识子节点是否加载完成，此配置不要动

•loading用来标识子节点是否正在加载中，此配置不要动

.href用来指定节点链接，此配置看业务需求变动

•hrefTarget节点链接的target,此配置看业务需求变动

•qtip指定tooltip文字，此配置看业务需求变动

•qtitle指定tooltip的title,此配置看一业务需求变动

•children内部使用，不要动

LoadingData加载数据

有两种加载数据的方式。一次性加载全部节点和分步加载，当节点过

多时，一次加载会有性能问题，而且不一定每个节点都用到。动态分

步加载是指在父节点展开的时候加载子节点。

LoadingtheEntireTree一次加载

Tree的内部实现是只有节点展开的时候加载数据。然而全部的层级

关系可以通过一个嵌套的数据结构一次全部加载，只要配置root节

点是展开的即可

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返回数据如下

{

"success":true,

"children":[

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

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

"children":[

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