医务部的英文翻译英语怎么说-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是什么意思在线翻译读音例句