Ext 3.0下 treepanel 分页

在ExtJs2.2 中有一个扩展可以分页，但遗憾的是在Ext3.0下不能运行。根据Ext2.2也扩展了一个在Ext3.0下的分页树

前台js

 

Ext.onReady(function() {

    var tree = new Ext.tree.TreePanel({

        renderTo: 'tree-ct',

        width: 300,

        height: 400,

        autoScroll: true,

        plugins: new Ext.ux.tree.TreeNodeMouseoverPlugin(), //must use the plugin 

        loader: new Ext.ux.tree.PagingTreeLoader({         //use the extend TreeLoader 

            dataUrl: 'Handler.ashx',

            pageSize: 2,                                    //the count of the childnode to show every time,default 20

            enableTextPaging: true,                          //whether to show the pagination's text 

            pagingModel: 'local'                             //local means client paging ,remote means server paging,default local

        }),

        root: new Ext.tree.AsyncTreeNode({ id: '0', text: '所有类别',expanded: true }),

        listeners:{

            render:function(tree){

 

            },

            expandnode:function(sNode){

                if (sNode.attributes.ptb)sNode.attributes.ptb.show();this.body.unmask();

            },

            collapsenode:function(sNode){

                if (sNode.attributes.ptb)sNode.attributes.ptb.hide();

            }

        }

    });

})

---------------------------------------------------------

使用前台分页，后台取结点信息不需要做特殊处理,只需要根据Ext传过去的node参数变量（欲展开的结点ID），获取下一层结点即可，返回JSON格式如： 
[{id:1,text:'node1',leaf:false,children:[{...},...{...}]},{id:1,text:'node2',leaf:true},...,{id:100,text:'node100',leaf:true}] 


后台分页实现： 
JS代码只需要将pagingModel:'local'改成pagingModel:'remote'即可 

后台则需要做更多的事情，后台将会接收到几个参数，分别是： 
node: 欲展开(分页)的结点ID 
start: 开始结点的序号，当结点第一次取数展开时，start为0,每翻一页，start在原来的值上加上limit（见下） 
limit: 每页显示的结点数目，为前台pageSize的值 
total: 总结点数目（只要在翻页时才传，结点第一次展开时因为没有，所以不传） 

为什么要传total这个值呢？ 
结点第一次展开时，后台要从数据库或别的地方求得total总数，以及取从start开始的limit个结点信息 
当结点展开后，在进行翻页时，此时后台没必要再进行total总数的重复计算，只需取到从start开始的limit个结点信息既可 
所以后台可以判断是否有total这个值，有就不求了，没有（第一次展开结点）才去求 

后台返回的JSON必须是以下格式： 
{total:200,nodes:[{id:1,text:'node1',leaf:false},...,{id:100,text:'node100',leaf:false}]} 
要有total值，并将结点信息数组赋给nodes属性 

---------------------------------------------------------------

如图：

--------------

后台代码

using System;

using System.Web;

public class Handler : IHttpHandler {

    

    public void ProcessRequest (HttpContext context) {

        context.Response.Write("[{id:1,text:'默认类别',leaf:false,children:[{id:11,text:'node11',leaf:true},{id:12,text:'node12',leaf:true},{id:13,text:'node13',leaf:true},{id:14,text:'node14',leaf:true},{id:15,text:'node15',leaf:true},{id:16,text:'node16',leaf:true}]},{id:2,text:'计时类',leaf:false,children:[{id:21,text:'node21',leaf:true},{id:22,text:'node22',leaf:true},{id:23,text:'node23',leaf:true},{id:24,text:'node24',leaf:true},{id:25,text:'node25',leaf:true},{id:26,text:'node26',leaf:true}]},{id:101,text:'蔬菜类',leaf:false,children:[{id:102,text:'node102',leaf:true},{id:103,text:'node103',leaf:true},{id:104,text:'node104',leaf:true},{id:105,text:'node105',leaf:true},{id:106,text:'node106',leaf:true},{id:107,text:'node107',leaf:true}]}]");

    }

 

    public bool IsReusable {

        get {

            return false;

        }

    }

}

----------------------------

需要导入文件：PagingTreeLoader.js

需要的话可以留下邮箱：