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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM