Extjs教程Tree(樹)

1、第八章 Tree(樹)2編輯：很多時候，如果能編輯節(jié)點的值將是很有用的一個功能。在觀察分類產品的層級結構時，你可能希望對產品的種類或者產品的名字做直接的修改，而不希望再去訪問別的頁面。那么你就可以通過Ext.tree.TreeEditor來實現(xiàn)這個功能。TreeEditor默認在你雙擊節(jié)點標簽的時候會為你的節(jié)點提供一個用于編輯的TextField。但是，和drag-and-drop拖拽一樣，開啟這個功能并不會自動向效勞器端保存改動。你需要在編輯完節(jié)點后觸發(fā)某個事件然后調用事件提供的函數來進行相應的操作：editor.on(beforecomplete, function(editor, new

2、Value, originalValue)/ Possible Ajax call?);beforecomplete事件函數有如下三個參數：editor：用來編輯這個節(jié)點的編輯字段；newValue：輸入的值；originalValue：改動前的值。然而，你需要注意的是editor這個參數不是一個普通的Ext.form.Field。它有一些額外的屬性，其中最有用的就是editNode對編輯節(jié)點的引用。你可以通過這個屬性來獲得節(jié)點的id，這個屬性在向效勞器發(fā)請求來和數據庫同步編輯的數據時很重要。與TreePanel的beforemovenode事件相比，beforecomplete可以讓用戶通過

3、在處理函數的結尾返回false來取消編輯改動。AJAX請求需要提供failure處理函數來手動地復原先前的數值?，F(xiàn)在我們介紹了如何建立一個簡單的節(jié)點編輯器，但這還意味著我們還需要完成一些更復雜的功能。TreeEditor的構造函數里有兩個可選的參數一共三個，后兩個可選。一個是field的配置對象，一個是TreeEditor的配置對象。field的配置可以是一下兩者之一：標準TextField編輯器的配置對象；已經建立的表單字段的實例。如果是后者，你可以在此采用NumberField，DateField或者其他的Ext.form.Field。第二個可選參數可以讓你配置TreeEditor，只要一

4、點小小的改動就能實現(xiàn)令人沖動的功能。例如，我們可以使用cancelOnEsc來允許用戶通過按下Esc鍵取消任何編輯；或者使用ignoreNoChange來避開編輯完成事件如果值在編輯后并沒有改變。修剪樹枝：關于TreePanel，還支持一些其它的技巧改變selection model選擇模型，過濾節(jié)點，以及顯示背景菜單等。所以，讓我們現(xiàn)在就學習它們。Selection models選擇模型：在我們之前的例如代碼里，我們可以通過拖拽和編輯TreeNodes來即時改變tree。TreePanel默認使用single-selection model單項選擇模型。我們之前的代碼都需要去選擇節(jié)點，但是對

5、于tree來講，簡單地選擇一個節(jié)點并不能滿足所有的需求，所以我們需要知道控制選擇方式的更多的方法和特性。一個很好的例子就是，我們在選擇一個節(jié)點以后，會自動產生一個信息面板來展示節(jié)點的細節(jié)。也許你有一個tree用來展示產品，點擊一個節(jié)點需要顯示該產品的價格和庫存量。我們可以使用selectionchange事件來讓這一切得以實現(xiàn)。我們還是使用先前的代碼做開始，我們添加一下的代碼：tree.selModel.on(selectionchange, function(selModel, node) var price = node.attributes.price;);selectionchange

6、事件的第二個參數node使得我們很容易獲得自定義的節(jié)點屬性值。如果我們允許多節(jié)點選擇呢？我們怎么去實現(xiàn)，我們怎么去處理selectionchange事件呢？我們可以使用Ext.tree.MultiSelectionModel來建立我們的TreePanel：var tree = new Ext.tree.TreePanel(renderTo:treeContainer,loader: treeLoader,root: rootNode,selModel: new Ext.tree.MultiSelectionModel();配置就是這么簡單。雖然selectionchange的處理方法和默認的s

7、election model很相似，但是還是有重要的區(qū)別。第二個參數是節(jié)點的數組，而不是單一的節(jié)點。selection model并不只局限于獲得與選擇相關的信息。它還允許控制當前的選擇。例如：MultiSelectionModel.clearSelections()方法在你處理有關多節(jié)點事件之后可以幫助你去除所有的選中狀態(tài)。DefaltSelectionModel有方法selectNext和selectPrevious可以讓你在tree中定位，在節(jié)點的層級中根據需求向上或者向下移動。背景菜單context menu：我們現(xiàn)在已經介紹了很多TreePanel提供的特性，所以讓我們用一些練習來穩(wěn)

8、固一下。當你右擊節(jié)點時彈出一個context menu，這是一種界面上的“捷徑。我們使用的代碼在之前的段落中已經介紹過，首先，讓我們建立menu，然后把它加到TreePanel中：var contextMenu = new Ext.menu.Menu(items: text: Delete, handler: deleteHandler , text: Sort, handler: sortHandler );tree.on(contextmenu, treeContextHandler);TreePanel提供了一個contextmenu事件來監(jiān)聽右擊節(jié)點。注意，我們的監(jiān)聽器不像之前的例子中

9、一樣采用匿名函數為了讓代碼更易讀。首先，treeContextHandler用來處理contextmenu事件：function treeContextHandler(node) node.select();contextMenu.show(node.ui.getAnchor();這個函數在調用時有一個node參數，我們需要在這個函數中先選擇這個node。然后我們用show方法彈出context menu，這個方法有一個參數，用來說明彈出的位置。在這個例子里，我們的位置為TreeNode的文本處。菜單處理：這個菜單有兩個入口Delete和Sort，讓我們看下Delete的處理函數：functi

10、on deleteHandler() tree.getSelectionModel().getSelectedNode().remove();利用我們之前的有關selection model的知識，我們可以獲得在treeContextHandler中選擇的節(jié)點，然后調用它的remove方法。這將從TreePanel中刪除這個節(jié)點和它的子節(jié)點。注意，我們不把改變傳遞給效勞器，但是如果你需要這么做，TreePanel有remove事件，你可以用它的處理函數來提供這個功能。Sort處理函數如下：function sortHandler() tree.getSelectionModel().getSe

11、lectedNode().sort(function (leftNode, rightNode) return (leftNode.text.toUpperCase() rightNode.text.toUpperCase() ? 1 : -1););再一次地，我們使用selection model來獲得選中的節(jié)點。ExtJS提供了sort方法，這個方法的第一個參數是一個函數，擁有兩個參數：一對節(jié)點。在這個例子里，我們通過節(jié)點的text屬性來進行降序排序，但是你可以利用別的自定義節(jié)點屬性。N：使用這個方法和TreeSorter的排序不沖突，因為TreeSorter的排序只監(jiān)聽beforechi

12、ldrendered、append、insert和textchange事件。其他的改動并不受影響。Delete動作將徹底地刪除選擇的節(jié)點，Sort動作將依照text標簽來對子節(jié)點進行排序。過濾：“試驗的標記，所以我只簡要介紹。它用在用戶想要根據節(jié)點某個特定的屬性去檢索節(jié)點時。這個屬性可以是text、id或者其他在創(chuàng)立節(jié)點時自定義的信息。讓我們利用之前的context menu來演示過濾功能，首先，我們需要建立TreeFilter：var filter = new Ext.tree.TreeFilter(tree);你需要回到context menu的配置里，在items里為其添加一個新的入口：

13、 text: Filter, handler: filterHandler 我們現(xiàn)在需要建立一個filterHandler函數來實現(xiàn)filter動作：function filterHandler() var node = tree.getSelectionModel().getSelectedNode();filter.filter(Bee, text, node);像別的處理函數一樣，我們先獲得當前選中的節(jié)點，然后調用filter函數。這個函數有三個參數：被過濾的值過濾的屬性可選，默認為text開始過濾的節(jié)點我們讓被選中的節(jié)點作為開始過濾的節(jié)點，這意味著我們將對右擊的產生菜單的節(jié)點的子節(jié)點通

14、過特定的值做過濾。我們的上面的例子包含aardvark、bee、cockroach這些動物的例子不需要做過濾，但是在某些狀況中需要。線上的軟件文檔多級且詳細，采用過濾可以對標題迅速檢索。你可以使用checkbox或者彈出對話框來讓用戶輸入過濾的數據，這樣會帶來靈活的用戶體驗。根：雖然我們演示了很多Ext中樹的功能，但是tree真正的強大之處在于它的設置、方法、各種類提供的加載點。我們已經了解了很多配置TreePanel和TreeNode的方法，讓我們得以實現(xiàn)強大的功能。然而，還有很多的配置項可以加強我們的tree，我們將會對一些有趣的配置進行說明。調整TreePanel：默認的，TreePan

15、el有很多圖形界面上的加強配置，可以滿足一些需求。例如，把animate設置為false可以阻止節(jié)點的展開和收攏的平滑的動畫顯示效果。這點在用戶頻繁展開關閉節(jié)點時很有幫助，可以放置動畫效果帶來的顯示不暢。因為TreePanel是擴展自Ext.Panel，所以它支持所有標準的Panel的功能。它可以支持tbar和bbar(頂部和底部工具欄)，header和footer元素，收起/展開的功能。TreePanel同樣可以包含于Ext.ViewPort和Ext.layout之中。裝飾：對于純粹的裝飾屬性，TreePanel提供了lines選項，當它被設置為false，將把TreeNodes之間的層級導

16、航線禁止掉。這點在形成簡單的tree時很有用，可以放置界面的混亂。hlColor屬性適用于drag-drop屬性開啟的tree。它控制節(jié)點的顏色高亮屬性值為十六位數字串，例如990000，當節(jié)點放下時被觸發(fā)可以通過設置dlDrop屬性為flase來禁止。設置trackMouseOver屬性為false可以禁止懸停在某個節(jié)點上時產生的高亮。調整TreeNode：在很多情況下，你不能人工地建立TreeNode除了root節(jié)點，所以你可能想，那些配置選項對你來說沒什么用。其實不是這樣的，因為不只是id和text屬性可以拿來創(chuàng)立節(jié)點所有JSON中的TreeNode屬性滿足配置屬性要求的都可以被用來建立

17、節(jié)點。如果你有如下樣子的JSON： text: My Node, disabled: true, href: :/extjs 你將獲得一個開始為disabled的節(jié)點，但是一旦它設置為enabled，它將成為到extjs 的鏈接。這個功能在傳遞應用的特殊信息的時候很有用。例如，你的效勞邏輯要求你某些節(jié)點不能擁有子節(jié)點。這是你設置allowChildren: false就可以實現(xiàn)這樣的功能該節(jié)點不能作為drop的目標。你還可以設置draggable: false，這樣你就可以組織某些節(jié)點的的拖放。我們可以通過設置checked: true來使得某個節(jié)點擁有checkbox事實上，checked不

18、管設置為true或者false都起作用。這些配置選項允許你規(guī)定節(jié)點的行為。還有許多其它的和TreeNode相關的配置。你可以使用icon配置來提供自定義的圖標，或者通過cls屬性來提供CSS樣式。qtip選項允許你彈出tooltip可以是對節(jié)點的說明。控制操作：當TreePanel被配置后，我們可以操控它的節(jié)點。TreePanel允許你在不同的層級之間“航行，從選擇的節(jié)點轉移到父節(jié)點或者子節(jié)點，或者順著當前的層級向上或者向下移動。我們也可以根據節(jié)點的路徑選擇或者展開節(jié)點，也可以以此找到某個節(jié)點。expandAll和collapseAll方法可以使我們展開合起所有節(jié)點，可以被用來還復原默認的狀態(tài)

19、。每個方法都有一個布爾值的參數，用來說明改變是否需要animate有動畫效果。expandPath方法的第一個參數是節(jié)點的path(路徑)。這個path唯一的利用層級確定了某個節(jié)點例如：/n-15/n-56/n-101。我們從這個路徑可以知道，目標節(jié)點的id為n-101，n-15是root節(jié)點，root節(jié)點有一個id為n-56的子節(jié)點。如果你了解XPath，這個就很好理解。如果你不了解的話，你可以把她和IP地址做比照提供了為一的路徑引用方式。通過向expandPath傳遞這個參數，tree可以定位到指定的節(jié)點，并且展開之。想象一下代碼：Ext.Mmpt(Node, Please e

20、nter a product name,function(btn, text)if (btn = ok)var path = GetNodePathFromName(text);tree.expandPath(path););GetNodePathFromName函數可以查詢效勞器并且返回節(jié)點的id，可以通過用戶的輸入快速定位節(jié)點。TreePanel.getNodeById也可以通過類似的方式使用。不僅是展開節(jié)點，還可以進行進一步的控制。在某些環(huán)境下，你可能需要做一些撤銷動作，這是你需要獲得節(jié)點的路徑。TreeNode.getPath提供了這樣的功能，你可以用這個方法來存儲節(jié)點的位置。更多的方

21、法：TreeNode還有很多其他的方法。我們已經介紹了sort和remove，但是現(xiàn)在我們可以添加一些根本應用程序的方法，如collapse和expand、enabled和disable，expandChildNodes和collapseChildNodes可以用來展開合起所有的子節(jié)點。findChild和findChildBy方法可以允許簡單或者自定義的對節(jié)點的搜索，以下這個例子我們用來查找第一個price屬性值為300的節(jié)點：var node = root.findChild(price, 300);在某些情況下，你可能需要對大量的節(jié)點屬性進行操控，你可以使用TreeNode.eachCh

22、ild方法：root.eachChild(function(currentNode) currentNode.attributes.price += 30;);因為第一個參數是一個函數，我們可以展示不同的需求帶來的邏輯。事件捕獲：我們已經演示了很多用戶和tree交互的方法，但是還有很多有用的事件。先前，我們討論了TreeNode的checked配置項的用法，當checkbox被勾選或者取消，checkchange事件被激發(fā)。以下代碼可以使得選中狀態(tài)高亮顯示：tree.on(checkchange, function(node, checked) node.eachChild(function(

23、currentNode) currentNode.ui.toggleCheck(););我們讓選中對TreeNode的子節(jié)點都生效，我們可以高亮顯示節(jié)點來清楚地顯示選中狀態(tài)，或者實現(xiàn)其他的邏輯，例如在頁面的任何位置展示新被選中的節(jié)點的信息。TreePanel事件的一個更通常的應用就是檢查改動和與效勞端同步改動。例如，一棵分類產品的樹有著邏輯約束某些特價商品需要說明最高價格。我們可以使用beforeappend事件來檢測：tree.on(beforeappend, function(tree, parent, node) return node.attributes.price parent.a

24、ttributes.maximumPrice;);這個例如演示了ExtJS提供的一種模式返回false來取消動作的執(zhí)行。在這里，如果價格超過了最高價，就會返回false，節(jié)點就不會被參加。記錄狀態(tài)：在很多應用中，TreePanel是用來做導航的，展示層級結構，沒個節(jié)點是一個HTML的鏈接。在這種場景里，如果用戶希望觀看多個頁面，一個接著一個，默認的TreePanel的行為會導致混亂。因為tree在頁面刷新時不會保持狀態(tài)，當用戶返回時，所有的展開的節(jié)點將被收起。所以，當用戶需要經常定位他們感興趣的頁面時，往往會因此失去耐性。StateManager狀態(tài)管理器：現(xiàn)在我們有一個管理TreePanel

25、的好方法，可以方便地存儲和復原狀態(tài)。我們需要存儲每個TreeNode的展開的狀態(tài)，當頁面重新加載的時候，我們可以重現(xiàn)展開的狀態(tài)。我們可以使用Ext.state.Manager和它的CookieProvider來存儲展開狀態(tài)。我們可以這樣初始化：Ext.state.Manager.setProvider(new Ext.state.CookieProvider();這是一個標準地設定state provider的方式，我們現(xiàn)在需要建立我們所需要存儲的東西，我們選擇存儲節(jié)點的路徑這可以使得用戶方便地訪問他/她所感興趣的最末端的節(jié)點：tree.on(expandnode, function (node) Ext.state.Manager.set(“treestate, node.ge