上面的圖片是一個簡單的樹，使用Ext.Net來創建這樣的樹結構非常簡單，代碼如下：
<ext:TreePanel runat="server"> <Root> <ext:Node Text="根節點" Expanded="true"> <Children> <ext:Node Text="節點1" Expanded="true"> <Children> <ext:Node Text="節點11" Leaf="true"></ext:Node> <ext:Node Text="節點12" Leaf="true"></ext:Node> </Children> </ext:Node> <ext:Node Text="節點2" Leaf="true"></ext:Node> <ext:Node Text="節點3" Leaf="true"></ext:Node> <ext:Node Text="節點4" Leaf="true"></ext:Node> </Children> </ext:Node> </Root> </ext:TreePanel>
這是一個使用標記來創建的樹，我們還可以使用服務器端代碼來創建，代碼如下：
private void createTree() { TreePanel tree = new TreePanel(); tree.Root.Add(new Node() { Text = "根節點", Expanded = true }); tree.Root[0].Children.Add(new Node() { Text = "節點1", Expanded = true }); tree.Root[0].Children[0].Children.Add(new Node() { Text = "節點11", Leaf = true }); tree.Root[0].Children[0].Children.Add(new Node() { Text = "節點12", Leaf = true }); tree.Root[0].Children.Add(new Node() { Text = "節點2", Leaf = true }); tree.Root[0].Children.Add(new Node() { Text = "節點3", Leaf = true }); tree.Root[0].Children.Add(new Node() { Text = "節點4", Leaf = true }); winTreeContainer.Add(tree); }
異步加載樹節點
在上面的代碼中，我們都是一次性加載了所有節點，雖然在開發過程中比較方便，但與異步加載來說更加的耗資源，尤其是當樹節點比較多的時候。
接下來讓我們來構建一個異步加載的樹。
<ext:TreePanel runat="server"> <Root> <ext:Node Text="根節點" NodeID="root" Expanded="false"> </ext:Node> </Root> <Store> <ext:TreeStore runat="server"> <Proxy> <ext:AjaxProxy Url="tree-handler.ashx"></ext:AjaxProxy> </Proxy> </ext:TreeStore> </Store> </ext:TreePanel>
在樹的定義中南，我們為根節點添加了NodeID，然后為Tree添加了TreeStore，TreeStore通過ajax代理獲取數據，獲取數據的url為tree-handler.ashx處理程序，我們的處理程序代碼為：
public void ProcessRequest(HttpContext context) { //得到node id string nodeId = context.Request["node"]; //根據node id 進行處理 NodeCollection nodes = new NodeCollection(); nodes.Add(new Node() { Text = "節點1" }); nodes.Add(new Node() { Text = "節點2" }); nodes.Add(new Node() { Text = "節點3" }); nodes.Add(new Node() { Text = "節點4" }); string responseString = nodes.ToJson(); context.Response.Write(responseString); context.Response.End(); }
在處理方法中，最主要的是第一句，從請求中得到node id，拿到node id之后，我們可以根據node id進行子節點的獲取操作，我們的代碼中是為了進行演示，所以並沒有獲取相應子節點的操作。
如果是在MVC中，我們可以使用StoreResult來作為Action的數據返回類型。
樹節點的自定義屬性
通常情況下，樹節點所包含的的信息並不是我們完整的數據，我們需要添加一些自定義的屬性，Ext.Net為我們提供這種功能：
第一步，我們需要在TreeStore中添加一個Model，這個Model中的字段就是我們自定義的屬性。
<Store> <ext:TreeStore runat="server"> <Model> <ext:Model runat="server"> <Fields> <ext:ModelField Name="CreateUser" Type="String"></ext:ModelField> </Fields> </ext:Model> </Model> <Proxy> <ext:AjaxProxy Url="tree-handler.ashx"></ext:AjaxProxy> </Proxy> </ext:TreeStore> </Store>
第二步，在生成節點的時候為我們自定義屬性賦值。
public void ProcessRequest(HttpContext context) { //得到node id string nodeId = context.Request["node"]; //根據node id 進行處理 NodeCollection nodes = new NodeCollection(); var node = new Node() { Text = "節點1" }; node.CustomAttributes.Add(new ConfigItem("CreateUser", "qeefee")); nodes.Add(node); string responseString = nodes.ToJson(); context.Response.Write(responseString); context.Response.End(); }
第三步，在前台代碼中使用自定義屬性
我們在樹的底部添加一個panel，用來顯示自定義的星系，然后添加一個事件，在節點選中的時候來更新panel的顯示
<DockedItems> <ext:Panel runat="server" Dock="Bottom" Height="30"> <Tpl> <Html> <p>創建人:{CreateUser}</p> </Html> </Tpl> </ext:Panel> </DockedItems> <Listeners> <ItemClick Handler="MyApp.showDetail.call(#{treeDynamic}, record)"></ItemClick> </Listeners>
事件的處理方法如下：
var MyApp = { showDetail: function (record) { var panel = this.getDockedItems("panel[dock=bottom]")[0]; panel.update(record.data); } };
在跟蹤事件處理過程中，我們可以看到自定義屬性的值：
它是和樹節點的其他屬性一起保存的，所以我們在使用record的時候，還可以方便的使用樹節點的其他屬性。
這個示例的效果圖如下：
多列樹（TreeGrid）
TreeGrid的效果如下圖：
類似於GridPanel，有標題、多列的樣式等。
又不同於GridPanel，因為它可以像樹一樣顯示一個展開、折疊圖標。
我們來看一下這個例子的代碼：
<ext:TreePanel runat="server" ID="treeGrid"> <Store> <ext:TreeStore ID="TreeStore1" runat="server"> <Model> <ext:Model ID="Model1" runat="server"> <Fields> <ext:ModelField Name="CreateUser" Type="String"></ext:ModelField> </Fields> </ext:Model> </Model> <Proxy> <ext:AjaxProxy Url="tree-handler.ashx"></ext:AjaxProxy> </Proxy> </ext:TreeStore> </Store> <ColumnModel> <Columns> <ext:TreeColumn runat="server" Text="名稱" DataIndex="text"></ext:TreeColumn> <ext:Column runat="server" Text="創建人" DataIndex="CreateUser"></ext:Column> </Columns> </ColumnModel> <Root> <ext:Node Text="根節點" NodeID="root" Expanded="false"> </ext:Node> </Root> </ext:TreePanel>
TreePanel的Store與之前例子相同，Root的配置也與之前的例子相同，唯一不同的是TreePanel中多了一個ColumnModel節點，這里面的配置和GridPanel的ColumnModel相同，TreeColumn列用來顯示樹的列，用起來很方便。