目錄視圖
摘要視圖
訂閱原文：http://docs.sencha.com/ext-js/4-0/#!/guide/tree
翻譯：frank/sp42 轉載請保留本頁信息
樹 Trees
樹面板組件是在 ExtJS 裏面最多彩繽紛的組件之一，用於顯示層次狀明顯的數據來說十分適合。樹面板跟 Grid 都是來自同一個基類的，之所以這樣的設計，是爲了那些擴展或者插件統統都可以複用一致的功能。比如多列、尺寸控制、拖放、渲染和篩選這些功能都是兩者共性的內容。
The Tree Panel Component is one of the most versatile Components in Ext JS and is an excellent tool for displaying heirarchical data in an application. Tree Panel extends from the same class asGrid Panel, so all of the benefits of Grid Panels - features, extensions, and plugins can also be used on Tree Panels. Things like columns, column resizing, dragging and dropping, renderers, sorting and filtering can be expected to work similarly for both components.
讓我們開始創建一個顆非常簡單的樹。
Let's start by creating a very simple Tree.
- Ext.create('Ext.tree.Panel', {
- renderTo: Ext.getBody(),
- title: 'Simple Tree',
- width: 150,
- height: 150,
- root: {
- text: 'Root',
- expanded: true,
- children: [
- {
- text: 'Child 1',
- leaf: true
- },
- {
- text: 'Child 2',
- leaf: true
- },
- {
- text: 'Child 3',
- expanded: true,
- children: [
- {
- text: 'Grandchild',
- leaf: true
- }
- ]
- }
- ]
- }
- });
此樹面板渲染到 document.body 元素上。我們把定義的根節點（The Root Node）自動擴張開來，這是默認的情況。根節點有三個子節點 ，其中前兩個是 leaf 節點，表示他們下面沒有任何子節點（children）了（終結了）。第三個節點是一個葉子節點，已經有一個 child 的葉節點（one child leaf node）。 text 屬性是節點的顯示的文本。可打開例子看看效果如何。
This Tree Panel renders itself to the document body. We defined a root node that is expanded by default. The root node has three children, the first two of which are leaf nodes which means they cannot have any children. The third node is not a leaf node
and has has one child leaf node. The text property is used as the node's text label. SeeSimple Tree for
a live demo.
樹面板的數據存儲在 TreeStore。上面的例子看不見 Store 配置的地方不是沒有 Store，而是使用內部缺省的。如果我們要另外配置不同的 Store，應該看起來像這樣：
Internally a Tree Panel stores its data in a TreeStore. The above example uses the root config as a shortcut for configuring a store. If we were to configure the store separately, the code would look something like this:
- var store = Ext.create('Ext.data.TreeStore', {
- root: {
- text: 'Root',
- expanded: true,
- children: [
- {
- text: 'Child 1',
- leaf: true
- },
- {
- text: 'Child 2',
- leaf: true
- },
- ...
- ]
- }
- });
- Ext.create('Ext.tree.Panel', {
- title: 'Simple Tree',
- store: store,
- ...
- });
參閱《DataGuide》以瞭解更多 Store 內容。
For more on Stores see the Data Guide.
Node 接口 The Node Interface
從上面的例子我們可以看到關於樹節點其下的許多屬性。那麼真正的節點究竟爲何物？前面已提到過，樹面板綁定到 TreeStore。而 ExtJS 中的 Store 是負責管理 Model 實例的集合。樹節點只是 Model 實例通過 NodeInterface 的裝飾接口。用 NodeInterface 裝飾 Model 的好處是賦予了 Model 在樹控件的狀態下，有新的方法與屬性。以下的截圖顯示了在開發工具節點其結構如何。
In the above examples we set a couple of different properties on tree nodes. But what are nodes exactly? As mentioned before, the Tree Panel is bound to aTreeStore. A Store in Ext JS manages a collection ofModelinstances. Tree nodes are simply Model instances that are decorated with aNodeInterface. Decorating a Model with a NodeInterface gives the Model the fields, methods and properties that are required for it to be used in a tree. The following is a screenshot that shows the structure of a node in the developer tools.
要全面瞭解一下節點的屬性、方法、事件，應參閱 API 文檔。
In order to see the full set of fields, methods and properties available on nodes, see the API documentation for theNodeInterface class.
改變樹的外觀 Visually changing your tree
讓我們試試簡單的。在你設置 useArrows 配置項爲 true 的時候，樹面板會隱藏旁邊的線條，而採用圖標箭頭表示展開和摺疊。
Let's try something simple. When you set the useArrows configuration to true, the Tree Panel hides the lines and uses arrows as expand and collapse icons.
設置根節點的 rootVisible 可決定根節點顯示與否。通過這樣做的話，一般就是根節點會自動擴大。下面的圖片顯示，rootVisible 設置爲 false，並設置 lines 爲 false 的時候看不見線的樹。
Setting the rootVisible property to false
visually removes the root node. By doing this, the root node will automatically be expanded. The following image shows the same tree withrootVisible set to false andlines set
to false.
多列 Multiple columns
鑑於樹面板跟 Grid 面板來自同一個基類，所以構成多列是非常輕鬆的。
Since Tree Panel extends from the same base class as Grid Panel adding more columns is very easy to do.
- var tree = Ext.create('Ext.tree.Panel', {
- renderTo: Ext.getBody(),
- title: 'TreeGrid',
- width: 300,
- height: 150,
- fields: ['name', 'description'],
- columns: [{
- xtype: 'treecolumn',
- text: 'Name',
- dataIndex: 'name',
- width: 150,
- sortable: true
- }, {
- text: 'Description',
- dataIndex: 'description',
- flex: 1,
- sortable: true
- }],
- root: {
- name: 'Root',
- description: 'Root description',
- expanded: true,
- children: [{
- name: 'Child 1',
- description: 'Description 1',
- leaf: true
- }, {
- name: 'Child 2',
- description: 'Description 2',
- leaf: true
- }]
- }
- });
和 Grid 面板那樣子配置 Ext.grid.column.Column，Tree 面板也是通過 columns 數組進行配置。唯一區別在於 Tree 面板至少得要一個 xtype 是“treecolumn”的列。該類型的列根據樹而設計的，擁有深度（depth）、線條（lines）、展開與閉合圖標等的特性。典型的 Tree 面板便是一個單獨的“treecolumn”。
The columns configuration expects an array of Ext.grid.column.Column configurations just like a Grid Panelwould have. The only difference is that a Tree Panel requires at least one column with an xtype of 'treecolumn'. This type of column has tree-specific visual effects like depth, lines and expand and collapse icons. A typical Tree Panel would have only one 'treecolumn'.
配置項 fields 會由內部的 Store 被複制到 Model 上（該方面可參閱《Data Guide》的 Model 部分）。請注意列其 dataIndex 配置項就是映射到 field 的。
The fields configuration is passed on to the Model that the internally created Store uses (See theData Guidefor
more information onModels). Notice how thedataIndex configurations
on the columns map to the fields we specified - name and description.
應該提出，當未定義列的時候，樹會自動創建一個單獨的 treecolumn，帶有“text” 的 dataIndex。還會隱藏樹的頭部。要顯示的話，可設置配置項 hideHeaders 爲 false。
It is also worth noting that when columns are not defined, the tree will automatically create one singletreecolumn with adataIndex set to 'text'. It also hides the headers on the tree. To show this header when using only a single
column set thehideHeaders configuration to 'false'.
爲樹加入節點 Adding nodes to the tree
不一定要在配置的時候將所有的節點添加到樹上，及後再加也可以的。
The root node for the Tree Panel does not have to be specified in the initial configuration. We can always add it later:
- var tree = Ext.create('Ext.tree.Panel');
- tree.setRootNode({
- text: 'Root',
- expanded: true,
- children: [{
- text: 'Child 1',
- leaf: true
- }, {
- text: 'Child 2',
- leaf: true
- }]
- });
這樣子在一棵靜態的樹上加上幾個節點毫無問題，但是一般而言樹面板還是會動態地加入許多節點。這樣我們就來看看如何通過編程來添加新的節點樹。
Although this is useful for very small trees with only a few static nodes, most Tree Panels will contain many more nodes. So let's take a look at how we can programmatically add new nodes to the tree.
- var root = tree.getRootNode();
- var parent = root.appendChild({
- text: 'Parent 1'
- });
- parent.appendChild({
- text: 'Child 3',
- leaf: true
- });
- parent.expand();
只要不是 leaf 節點，它都有 appendChild 的方法，送入一個節點的實例，或者節點的配置項對象作爲參數，該方法就是返回新創建的節點。上一例調用了新創建節點其 expand 的方法。
Every node that is not a leaf node has an appendChild method which accepts a Node, or a config object for a Node as its first parameter, and returns the Node that was appended. The above example also calls theexpand method to expand the newly created parent.
另外你可以通過內聯的寫法創建父節點。下一例與上例的作用一樣。
Also useful is the ability to define children inline when creating the new parent nodes. The following code gives us the same result.
- var parent = root.appendChild({
- text: 'Parent 1',
- expanded: true,
- children: [{
- text: 'Child 3',
- leaf: true
- }]
- });
有些時候我們想將節點插入到某個固定的位置。這樣的話，就需要 insertBefore 或 insertChild 方法，都由 Ext.data.NodeInterface 提供。
Sometimes we want to insert a node into a specific location in the tree instead of appending it. Besides theappendChild method,Ext.data.NodeInterface also
provides insertBefore and insertChild methods.
- var child = parent.insertChild(0, {
- text: 'Child 2.5',
- leaf: true
- });
- parent.insertBefore({
- text: 'Child 2.75',
- leaf: true
- }, child.nextSibling);
insertChild 方法需要一個 child 將被插入索引。 insertBefore 方法預計的參考節點。將參考節點之前插入新的節點。
The insertChild method expects an index at which the child will be inserted. TheinsertBefore method expects a reference node. The new node will be inserted before the reference node.
NodeInterface 還提供了以下幾個屬性，供其他節點作“引用”時之用。
NodeInterface also provides several more properties on nodes that can be used to reference other nodes.
- 4樓 zhaohaizh 2012-08-09 15:55發表
-
![]()
- 大哥，問問你，appendChild()確實好像可以追加子節點，但是record.raw卻是空的，而直接寫在裏面的卻有值，爲什麼？追加的節點數據爲空，我最後怎麼使用呢？？
- 3樓 lovehainansnow 2012-05-10 17:58發表
-
![]()
- 給treestore添加的時候怎麼添加model，而不是添加nodeinterface.insertchild方法可以插入model，但是又沒法設置nodeinterface的屬性。用appendchild的話，以後獲取model的屬性如何獲取？
- 2樓 liyanyun 2012-01-06 16:09發表
-
![]()
-
QQ 419644761 ，能否加我，我有問題想問大哥你！
我後臺生成一段不符合treenode格式的xml樹結構（也就是沒有leaf,text,cls,expand..屬性），我想前臺展示爲一顆樹結構，要怎麼弄哦？
- 1樓 hexawing 2011-11-24 15:25發表
-
![]()
-
有沒有辦法能讓樹的每一片葉子圖標不一樣啊？
- Re: zhangxin09 2011-11-25 10:13發表
-
![]()
- 回覆hexawing：分配葉子的 cls 配置項（js中），然後在css裏定義圖標。
-
個人資料
- 訪問：437604次
- 積分：5898分
- 排名：第587名
- 原創：140篇
- 轉載：13篇
- 譯文：45篇
- 評論：585條
-
文章搜索
-
文章分類
- OO思想（js）(16)
- 語言基礎 & 編碼(10)
- 正則表達式(3)
- 開發環境 & 工具(5)
- 網頁DHTML & HTML5(17)
- 服務端JavaScript（node）(12)
- Edk（asp jscript）(5)
- ExtJS 4.0(39)
- 業界人物(5)
- Win 8 Metro(4)
- Sencha Touch 2 / 移動HTML5開發(11)
-
最新評論
-
: @zhangxin09:http://stackoverflow.com/questions/553...
-
: HTC 雙擎是可以得，只要簡單地在瀏覽器地址欄中輸 about:debug 即可。
-
: 同上~~~
-
: @wxxian001:按照文中所配置的話，你需要打開的是Node-5858項目中的文件纔可以監控，具...
-
: @zhangxin09:額，2年前的了。。
-
: @匿名用戶:謝謝支持！
-
: @匿名用戶:謝謝支持！
-
: @匿名用戶:謝謝鼓勵！
-
: @匿名用戶:謝謝鼓勵！
-
: @匿名用戶:呵呵，謝謝支持！
聯繫郵箱：webmaster(at)csdn.net
