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
需要的话可以留下邮箱：