ExtJS and MVC : 03 - Adding a TreePanel

This website is no longer actively supported

Written by John DeVight on 11 May 2011 18:07

Download RAZOR Source Code
Download ASPX Source Code
* Note: the extjs folder has all been removed to reduce the zip file size

Overview

I want to create a TreePanel for users to be able to navigate information. I am prototyping a contract management application and the users will need to be able to drill down into an organizational hierarchy to get to their contracts. However, for the sake of prototyping, I'm not going to worry about building the actual organizational hierarchy. I'm just going to get a TreePanel to work.

Here is the TreePanel that I created in my navigation panel:

Steps Involved

Creating the data for the TreePanel

I generate some sample data in my application to build the tree. The data is going to be serialized into JSON so that the TreePanel can read the data and build the tree. The TreePanel is made up of TreeNode objects. The TreeNode attributes that I am going to focus on for this demo are text, leaf and children. The text attribute contains the string that will be displayed for the node. The leaf attribute is false if the node can contain child nodes, and true if the node cannot contain child nodes. The children attribute is a list of the child nodes. To generate the tree nodes, I create a C# class that mirrors the ExtJS TreeNode class. In the "Models" folder of my web application, I create a new class called TreeNode.cs. The TreeNode class will contain 3 properties: text, leaf and children.

Here is the C# code:

public class TreeNode
{
    public string text { get; set; }
    public bool leaf { get; set; }
    public List<TreeNode> children { get; set; }

    public TreeNode()
    {
        leaf = false;
        children = new List<TreeNode>();
    }
}

Next I need to provide a REST style end-point that the TreePanel can call to populate the tree. ASP.NET MVC makes this easy to do. I simply create a function in my HomeController (found in the Controller folder) that returns a JsonResult. I use a List<> collection to create a list of the root TreeNode objects. The TreeNode list is converted to JSON by using the Controller.Json function. The first parameter is the object to be converted into JSON. The second parameter determines whether the function can be exposed as a REST style call that can be made to get the JSON data.

Here is the C# code:

public JsonResult NavigationTree()
{
    List<TreeNode> treeNodeList = new List<TreeNode>();

    for (int pdx = 1; pdx <= 3; pdx++)
    {
        treeNodeList.Add(new TreeNode
        {
            text = string.Format("Project {0}", pdx)
        });

        for (int cdx = 1; cdx <= 3; cdx++)
        {
            treeNodeList[pdx - 1].children.Add(new TreeNode
            {
                text = string.Format("Contract {0}", cdx),
                leaf = true
            });
        }
    }

    return Json(treeNodeList, JsonRequestBehavior.AllowGet);
}

Creating the TreePanel

I create the TreePanel in the same javascript function where I created my viewport. When I create the TreePanel, I use the TreeLoader to point to my NavigationTree function in the HomeController. The TreePanel is then added to the west region of the viewport when the viewport is created by adding an items attribute to the 'west' region that takes the instance of the TreePanel in square brackets like this:

items: [ treePanel ]

Here is the Javascript:

Ext.onReady(function () {
    var treePanel = new Ext.tree.TreePanel({
        id: 'tree-panel',
        rootVisible: false,

        loader: new Ext.tree.TreeLoader({
            dataUrl: '/Home/NavigationTree'
        }),

        root: new Ext.tree.AsyncTreeNode()
    });

    var viewport = new Ext.Viewport({
        layout: 'border',
        items: [
            new Ext.BoxComponent({
                region: 'north',
                height: 40,
                contentEl: 'north'
            }), {
                region: 'south',
                contentEl: 'south',
                height: 24
            }, {
                region: 'west',
                id: 'west-panel',
                title: 'Navigation',
                split: true,
                width: 200,
                minSize: 175,
                maxSize: 400,
                layout: 'fit',
                collapsible: true,
                margins: '0 0 0 5',
                items: [ treePanel ]
            }, {
                region: 'center',
                id: 'center-panel',
                layout: 'fit',
                contentEl: 'center'
            }
        ]
    });
});

Conclusion

In this example, we had a chance to do some ASP.NET MVC3 code using C# and integrate that code with ExtJS.

References

• ExtJS: http://www.sencha.com/products/js/
• ExtJS and MVC : 01 - Getting Started
• ExtJS and MVC : 02 - Applying a Border Layout

Discussion Closed

Shakakai (guest) 07 Mar 2013 03:50

What if I want to add checkboxes to the nodes?

---