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開發環境。