ExtJS之TreeGrid使用心得

最新项目中用到TreeGrid，查阅了很多资料，总的来说有些心得，愿意拿出来和大家一起分享一下：

一、在页面中引入 ：ext-all.css、treegrid.css、ext-base-debug.js、ext-all-debug.js、TreeGridSorter.js、TreeGridColumnResizer.js、TreeGridNodeUI.js、TreeGridLoader.js、TreeGridColumns.js、TreeGrid.js

二、为了保持代码规范，创建一个myTreeGrid.js，引入页面。

三、myTreeGrid.js中的代码：

对于处理数据量小的，可以把数据一次性加载进来，代码如下：

Ext.onReady(function() {
    Ext.QuickTips.init();

   //定义树的加载器，采用的MVC取的数据，返回的是JSON数据格式
    var treeloader = new Ext.ux.tree.TreeGridLoader({ 
             dataUrl: "/TreeData/GetTreeJsonData"
     });

    var treeGrid = new Ext.ux.tree.TreeGrid({
        title: 'Core Team Projects',
        width: 500,
        height: 300,
        renderTo: Ext.getBody(), //渲染
        enableDD: true, //节点是否可移动

        columns:[{
            header: 'Task',
            dataIndex: 'task', //索引，与JSON数据中的某个名称对应
            width: 230
        },{
            header: 'Duration',
            width: 100,
            dataIndex: 'duration',
            align: 'center',
        },{
            header: 'Assigned To',
            width: 150,
            dataIndex: 'user'
        }],
        loader: treeloader //加载数据
    });
});

　　实现异步加载数据，代码如下：

Ext.onReady(function() {

    Ext.QuickTips.init();//实现智能提示的作用

    var treeGrid = new Ext.ux.tree.TreeGrid({
        title: 'Core Team Projects',
        width: 500,
        height: 300,
        renderTo: Ext.getBody(), //渲染
        enableDD: true, //节点是否可移动

        columns:[{
            header: 'Task',
            dataIndex: 'task', //索引，与JSON数据中的某个名称对应
            width: 230
        },{
            header: 'Duration',
            width: 100,
            dataIndex: 'duration',
            align: 'center',
        },{
            header: 'Assigned To',
            width: 150,
            dataIndex: 'user'
        }],
       requestUrl: '/TreeData/GetTreeJSONData/?NodeName='
       listeners: {  //监听事件
                    'beforeload': function (node) {//节点加载前
                     if (node.isRoot) {   //首次加载
                             this.loader.dataUrl = this.requestUrl;
                       }else { 
                             var nodeText = node.attributes["text"]; //取得点击节点名称
                             var rqtUrl = this.requestUrl + nodeText; //得到新的URL地址
                                    if (node.attributes.loader.dataUrl) {
                                            this.loader.dataUrl = rqtUrl //点击节点,后台请求数据
                                        }
                       }
                    this.root.attributes.loader = null; //防止节点的重复加载
                }
           }
    });
});

　四、JSON数据

       JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于JavaScript的一个子集。Extjs中应用较多的，例如Tree、Gridview、Combo等，一般都会用到JSON提供数据，简单方便。

五、以上都是个人的心得，用的是.NET MVC2开发环境。