医务部的英文翻译英语怎么说-marlboro什么意思
2023年3月30日发(作者:gas是什么意思)
ExtJS4官方指南翻译:Tree组件
分类:ExtJS4.02011-10-2322:08642人阅读评论(3)收藏举报
原文:/ext-js/4-0/#!/guide/tree
翻译:frank/sp42转载请保留本页信息
1树Trees
树面板组件是在ExtJS里面最多彩缤纷的组件之一,用于显示层次状明显的数据来说十分
适合。树面板跟Grid都是来自同一个基类的,之所以这样的设计,是为了那些扩展或者插
件统统都可以复用一致的功能。比如多列、尺寸控制、拖放、渲染和筛选这些功能都是两者
共性的内容。
TheTreePanelComponentisoneofthemostversatileComponentsinExtJSandisan
nelextendsfrom
thesameclassasGridPanel,soallofthebenefitsofGridPanels-features,extensions,
likecolumns,columnresizing,
dragginganddropping,renderers,sortingandfilteringcanbeexpectedtoworksimilarly
forbothcomponents.
让我们开始创建一个颗非常简单的树。
Let\'sstartbycreatingaverysimpleTree.
viewplain
(\'\',{
To:y(),
:\'SimpleTree\',
:150,
:150,
:{
:\'Root\',
ed:true,
en:[
10.{
:\'Child1\',
:true
13.},
14.{
:\'Child2\',
:true
17.},
18.{
:\'Child3\',
ed:true,
en:[
22.{
:\'Grandchild\',
:true
25.}
26.]
27.}
28.]
29.}
30.});
此树面板渲染到元素上。我们把定义的根节点(TheRootNode)自动扩
张开来,这是默认的情况。根节点有三个子节点,其中前两个是leaf节点,表示他们下面
没有任何子节点(children)了(终结了)。第三个节点是一个叶子节点,已经有一个child
的叶节点(onechildleafnode)。text属性是节点的显示的文本。可打开例子看看效果如
何。
nedarootnodethatis
tnodehasthreechildren,thefirsttwoofwhichareleaf
rdnodeisnotaleafnodeand
tpropertyisusedasthenode\'stextlabel.
SeeSimpleTreeforalivedemo.
树面板的数据存储在TreeStore。上面的例子看不见Store配置的地方不是没有Store,而
是使用内部缺省的。如果我们要另外配置不同的Store,应该看起来像这样:
veex古诗图片 ampleuses
retoconfigurethestore
separately,thecodewouldlooksomethinglikethis:
viewplain
re=(\'ore\',{
2.
:{
:\'Root\',
ed:true,
6.
en:[
8.{
:\'Child1\',
:true
11.
12.},
13.{
:\'Child2\',
:true
16.
17.},
19.]
20.}
21.});
22.
(\'\',{
24.
:\'SimpleTree\',
:store,
28.
29.});
参阅《DataGuide》以了解更多Store内容。
FormoreonStoresseetheDataGuide.
2Node接口TheNodeInterface
从上面的例子我们可以看到关于树节点其下的许多属性。那么真正的节点究竟为何物?前面
已提到过,树面板绑定到TreeStore。而ExtJS中的Store是负责管理Model实例的集合。
树节点只是Model实例通过NodeInterface的装饰接口。用NodeInterface装饰Model的
好处是赋予了Model在树控件的状态下,有新的方法与属性。以下的截图显示了在开发工
具节点其结构如何。
tare
nodesexactly?Asmentionedbefore,in
desaresimplyModelinstances
tingaModelwithaNodeInterfacegives
theModelthefields,methodsandpropertiesthatarerequiredforittobeusedinatree.
Thefollowingisascreenshotthatshowsthestructureofanodeinthedevelopertools.
要全面了解一下节点的属性、方法、事件,应参阅API文档。
Inordertoseethefullsetoffields,methodsandpropertiesavailableonnodes,seethe
APIdocumentationfortheNodeInterfaceclass.
3改变树的外观Visuallychangingyourtree
让我们试试简单的。在你设置useArrows配置项为true的时候,树面板会隐藏旁边的线条,
而采用图标箭头表示展开和折叠。
Let\'usettheuseArrowsconfigurationtotrue,theTree
Panelhidesthelinesandusesarrowsasexpandandcollapseicons.
设置根节点的rootVisible可决定根节点显示与否。通过这样做的话,一般就是根节点会自
动扩大。下面的图片显示,rootVisible设置为false,并设置lines为false的时候看不见
线的树。
gthis,the
lowingimageshowsthesametree
withrootVisiblesettofalseandlinessettofalse.
4多列Multiplecolumns
鉴于树面板跟Grid面板来自同一个基类,所以构成多列是非常轻松的。
SinceTreePanelextendsfromthesamebaseclassasGridPaneladdingmorecolumns
isveryeasytodo.
viewplain
e=(\'\',{
To:y(),
:\'TreeGrid\',
:300,
:150,
:[\'name\',\'description\'],
s:[{
:\'treecolumn\',
:\'N天街小雨润如酥出自哪首诗 ame\',
dex:\'name\',
:150,
le:true
13.},{
:\'Description\',
dex:\'description\',
:1,
le:true
18.}],
:{
:\'Root\',
ption:\'Rootdescription\',
ed:true,
en:[{
:\'Child1\',
ption:\'Description1\',
:true
27.},{
:\'Child2\',
ption:\'Description2\',
:true
31.}]
32.}
33.});
和Grid面板那样子配置,Tree面板也是通过columns数组进行
配置。唯一区别在于Tree面板至少得要一个xtype是“treecolumn”的列。该类型的列根据
树而设计的,拥有深度(depth)、线条(lines)、展开与闭合图标等的特性。典型的Tree
面板便是一个单独的“treecolumn”。
configurations
ydifferenceisthataTreePanelrequiresatl封豕长蛇 east
oneco桃花流水窅然去 别有天地非人间 lumnwithanxtypeof\'treecolumn\'.Thistypeofcolumnha带月亮的诗句大全三百句 stree-specificvisual
effectslikedepth,alTreePanelwouldhave
onlyone\'treecolumn\'.
配置项fields会由内部的Store被复制到Model上(该方面可参阅《DataGuide》的
Model部分)。请注意列其dataIndex配置项就是映射到field的。
ThefieldsconfigurationispassedontotheModelthattheinternallycreatedStoreuses
(SeetheData改善的拼音 GuideformoreinformationonModels).Noticehow
thedataIndexconfigurationsonthecolumnsmaptothefieldswespecified-nameand
description.
应该提出,当未定义列的时候,树会自动创建一个单独的treecolumn,带有“text”的
dataIndex。还会隐藏树的头部。要显示的话,可设置配置项hideHeaders为false。
Itisalsowor闻檀的全部小说 thnotingthatwhencolumnsar春如旧 enotdefined,thetreewillautomaticallycreate
onesingletreecolumnwithadataIndexsetto\'text\'.Italsohidestheheadersonthetree.
ToshowthisheaderwhenusingonlyasinglecolumnsetthehideHeadersconfiguration
to\'false\'.
5为树加入节点Addingnodestothetree
不一定要在配置的时候将所有的节点添加到树上,及后再加也可以的。
TherootnodefortheTreePaneldoesnothavetobespecifiedintheinitialconfiguration.
Wecanalwaysadditlater:
viewplain
e=(\'\');
2.
tNode({
:\'Root\',
ed:true,
6.
en:[{
:\'Child1\',
:true
10.
11.},{
:\'Child2\',
:true
14.
15.}]
16.});
这样子在一棵静态的树上加上几个节点毫无问题,但是一般而言树面板还是会动态地加入许
多节点。这样我们就来看看如何通过编程来添加新的节点树。
Althoughthisisusefulforverysmalltreeswithonlyafewstaticnodes,mostTreePanels
\'stakealookathowwecanprogrammaticallyadd
newnodestothetree.
viewplain
t=tNode();
2.
ent=Child({
:\'Parent1\'
5.
6.});
7.
Child({
:\'Child3\',
:true
11.
12.});
13.
();
只要不是leaf节点,它都有appendChild的方法,送入一个节点的实例,或者节点的配置
项对象作为参数,该方法就是返回新创建的节点。上一例调用了新创建节点其expand的
方法。
EverynodethatisnotaleafnodehasanappendChildmethodwhichacceptsaNode,or
aconfigobjectforaNodeasitsfirstparameter,andreturnstheNodethatwasappended.
Theaboveexamplealsocallstheexpandmethodtoexpandthenewlycreatedparent.
另外你可以通过内联的写法创建父节点。下一例与上例的作用一样。
Alsouseful
followingcodegivesusthesameresult.
viewplain
ent=Child({
2.
:\'Parent1\',
ed:true,
en:[{
6.
:\'Child3\',
:true
9.}]
10.});
有些时候我们想将节点插入到某个固定的位置。这样的话,就需要insertBefore或insertChild
方法,都由terface提供。
Sometimeswewanttoinsertanodeintoaspecificlocationinthetreeinsteadof
stheappendChildmethod,terfacealso
providesinsertBeforeandinsertChildmethods.
viewplain
ld=Child(0,{
:\'Child2.5\',
3.
:true
5.});
6.
Before({
:\'Child2.75\',
9.
:true
11.},bling);
insertChild方法需要一个child将被插入索引。insertBefore方法预计的参考节点。将参考
节点之前插入新的节点。
TheinsertChildmethodexpectsanindexatwhichthechildwillbeinserted.
nodewillbeinserted
beforethereferencenode.
NodeInterface还提供了以下几个属性,供其他节点作“引用”时之用。
NodeInterfacealsoprovidesseveralmorepropertiesonnodesthatcanbeusedto
referenceothernodes.
nextSibling
previousSibling
parentNode
lastChild
firstChild
childNodes
更多推荐
EXT是什么意思在线翻译读音例句
发布评论