Ext.Net学习笔记22：Ext.Net Tree 用法详解

上面的图片是一个简单的树，使用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列用来显示树的列，用起来很方便。