Extjs4.2 TreePanel+Asp.net mvc 动态加载节点

extjs经常使用的部分有界面、数据模型、数据源、事件。构建TreePanel需要三个，UI、模型、和数据源。

在extjs中，为了让数据源能够正确载入数据，我们需要定义以个数据模型。

树节点的模型定义：

Ext.define('TreeData', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', },
        { name: 'cls' },
        { name: 'leaf' },
        { name: 'text' },
    ]
});

一个节点有的几个关键字段,Id是唯一标识，在真个Treepanel中不能重复。cls是节点的图标。leaf表示是否还有子节点。text节点显示的名称。

数据源定义：

var treestore = new Ext.data.TreeStore({
            proxy: {
                type: 'ajax',
                url: '/tree/getnodes'
            },

            model: 'TreeData',
            root: {
                text: '目录树',
                id: 'root',
                expanded: true
            }
        })

创建treepanel：

        var treepanel=Ext.create('Ext.tree.Panel', {
            title: '目录树',
            renderTo : Ext.getBody(),
            width: 200,
            collapsible: true,   
            split: true,        
            store: treestore,
            rootVisible: false,
            useArrows: true
        });

后台代码，我们采用的asp.net mvc 来实现：

    public class TreeController : Controller
    {
        public ActionResult GetNodes(string node)
        {
            List<object> result = new List<object>();
            if (node == "root")
            {
                result.Add(new
                {
                    cls = "devtree-folder",
                    id = "001",
                    qtip = "",
                    text = "测试1"
                });
            }
            else
            {
                //根据具体情况返回结果，可以是菜单功能，也可以是数据库查询出来的数据。
                result.Add(new
                {
                    cls = "",
                    id = "001000",
                    qtip = "",
                    text = "数据1",
                    leaf = false
                });
            }
            return Json(result, JsonRequestBehavior.AllowGet);
        }
    }

数据源在异步请求数据时，会将当前节点的id（node）传到后台。后台根据具体需求情况返回符合规则的数据。