1、tree 的分页。
当树中的叶子节点过多的时候，游览器就承受不了，很容易死机，当然可以通过异步树，点击树的一个
节点文件节点时，才异步的到后台抓取对应的子节点。当一个节点下面的子节点也很多的时候，异步可能也
解决不了你的问题。其浏览器不怕你在内存中存多少节点，只是怕页面上一次显示多少节点，当显示的节点
于一百个的时候，你的游览器可能就会受不了了。原因我也不明的。其实这种情况我也没有遇到过，但是这
种情形就要求我们对tree的节点进行分页。
1.1 程序控制的方式。
我们从后台把树的节点一次性都从后台加载到前台。让节点的json数据如下：
{"totalCount":7,"records":[
{"id":"1","text":"parent directory","'leaf":false,"start":0,children:[
{"id":"1.1",text:"sub node 1","leaf":true,"index":1},
{"id":"1.2",text:"sub node 2","leaf":true,"index":2},
{"id":"1.3",text:"sub node 3","leaf":true,"index":3},
{"id":"1.4",text:"sub directory","leaf":false,"start":0,children:[]},
{"id":"1.5",text:"sub node 4","leaf":true,"index":4},
{"id":"1.6",text:"sub node 5","leaf":true,"index":5}
]}，
{"id":"2","text":"parent directory","'leaf":false,children:[
{"id":"2.1",text:"sub node 1","leaf":true,"index":1},
{"id":"2.2",text:"sub directory","leaf":false,"start":0,children:[]},
{"id":"2.3",text:"sub node 2","leaf":true,"index":2},
{"id":"2.4",text:"sub node 3","leaf":true,"index":3},
{"id":"2.5",text:"sub node 4","leaf":true,"index":4},
]}
]}
手写的数据，不能测试用的。数据结构中有两个一层文件夹。我们注意到子节点中的叶子节点都是有一个
index属性,文件夹节点都有一个start属性。这些序号就是前台分页的依据。相信大家都能够想到了前台我们呆要给出 start, pageSize 然
后通过index属性就可以过滤出某一页中的记录。下面是tree config 中的一些：
id : 'tree',
listeners : {
beforeexpandnode: function(node, deep, anim) {
if (node.findChild('leaf', true)) {
。。。。
//show paginated nodes
node.eachChild(function(child){
if (child.isLeaf()) {
currentIndex = child.attributes.index;
if(currentIndex >= node.attributes.start && currentIndex <= node.attributes.end) {
child.getUI().show();
} else {
child.getUI().hide();
}
}
});
//show paginator
preSpace = ' | ';
prevLink = "<a class='tree_paginator' href='#' οnclick=\"Ext.getCmp('tree').rollPageDown(Ext.getCmp('tree').getNodeById('" + node.id + "')); return false;\">< Previous "+ pageSize +"</a>";
nextLink = "<a class='tree_paginator' href='#' οnclick=\"Ext.getCmp('tree').rollPageUp(Ext.getCmp('tree').getNodeById('" + node.id + "')); return false;\">Next "+ pageSize +" ></a> ";
recordRange = node.attributes.start+' to '+ node.attributes.end+' of '+total;
dragLink = '';
if (this.getLoader().baseParams.brief) {
dragLink = " <a href='#' οnclick=\"processDrag(Ext.getCmp('tree').getNodeById('" + node.id + "'),"+node.attributes.start+","+this.getLoader().baseParams.size+");\">Invite all displayed</a>";
}
if (node.attributes.start == 1) {
if (parseInt(total) <= pageSize) {
$("#"+node.id+"_paginator").html(preSpace + recordRange + dragLink);
} else {
$("#"+node.id+"_paginator").html(preSpace + recordRange +' | ' + nextLink + dragLink);
}
} else if (node.attributes.start > 1 && node.attributes.end < parseInt(total)){
$("#"+node.id+"_paginator").html(preSpace + prevLink + ' | ' + recordRange + ' | ' + nextLink + dragLink);
} else if (node.attributes.end >= parseInt(total)) {
$("#"+node.id+"_paginator").html(preSpace + prevLink + ' | ' + recordRange + dragLink);
} else {
$("#"+node.id+"_paginator").html('');
}
}
}
},
rollPageUp: function(node) {
if (node.findChild('leaf', true)) {
if (!node.attributes.children) {
this.getLoader().baseParams.start = node.attributes.end;
}
node.attributes.start = node.attributes.end + 1;
this.getLoader().load(node, function() {
node.expand();
});
}
},
rollPageDown: function(node) {
if (node.findChild('leaf', true)) {
if (!node.attributes.children) {
this.getLoader().baseParams.start = node.attributes.start - this.getLoader().baseParams.size -1;
}
node.attributes.start = node.attributes.start - this.getLoader().baseParams.size;
this.getLoader().load(node, function() {
node.expand();
});
}
},
....
过程是这样子的： 当 this.getLoader().load（）成功后 node.expand() node 展开时 发生 beforeexpandnode 事件。通过事件中 currentIndex 如果在
当页内 则 child.getUI().show()，否则 child.getUI().hide(); 另一个地方就是生成分页信息，与 上一页rollPageUp，下一页rollPageDown的实现。
1.2 Ext扩展类：Ext.ux.tree.PagingTreeLoader。
这种方法应该经上面的方法要上一些吧。我没有用它。因为是后来才知道有这个东西的。强人太多了。
网址：http://www.iteye.com/topic/232161。
2. Ext gird的前台分页。
方法一： 1、store 中 一次性从后台url 中得到所以数据
2、利用 store.filterBy(function(){ 过滤动作 }) 过滤掉不是当前页的数据。
3、由于 store是过滤了的，所以分页信息会有错误，如总记录数不会变，而实际上因为有些过滤了，所以总记录数应该少了。
其次用url做proxy的store一般分页的button都会从后台读数据，我们应该按自己的需求去实现一个新的Ext.ux.FrontPagingToolBar 下面是我根据自己的需求实现的一个：
Ext.FrontPagingToolbar = Ext.extend(Ext.PagingToolbar,{
doLoad : function(start){
var o = {}, pn = this.paramNames;
o[pn.start] = start;
o[pn.limit] = this.pageSize;
if(this.fireEvent('beforechange', this, o) !== false){
// this is default action to request url when change paging. so I changed it.
// this.store.load({params:o});
this.onLoad(this.store,null,{params:o});
var pos = -1;
this.store.filterBy(function(el){
if ('users' == this.storeId && el.data['network'] != pn.network.id) return false;
pos++;
if (pos<start || pos >start+o[pn.limit]-1) return false;
return true;
});
}
},
getPageData : function(){
var pn = this.paramNames
var storeId = this.store.storeId;
var total = 0;
// the total count is changed . nolong count(this.store.snapshot) this.store.data is changing
var data = this.store.snapshot ? this.store.snapshot : this.store.data ;
data.each(function(){
if (!('users' == storeId && this.data.network != pn.network.id)) total++;
});
return {
total : total,
activePage : Math.ceil((this.cursor+this.pageSize)/this.pageSize),
pages : total < this.pageSize ? 1 : Math.ceil(total/this.pageSize)
};
}
});
方法二：1、网上下载一个 Ext.ux.data.PagingMemoryProxy.js 用户扩展。
这个扩展有一个好处就是它的数据是前台的内存中，所以可以用ajax的方法一点一点的把记录加放到这个store的内存中。配合PagingMemoryProxy的
过滤功能，可以完成强大的功能，它比方法的好在 可以每次加载一点点数据，且不用自己去扩展一个分页的类。
方法三：3、这个是王蕴真还在实现的。现在原理大约是这样子，一次性加载所有的数据，存在一个records数组中然后每次显示数据时候调用 store.loadData();
把当前页要显示的记录从records中过滤出来到data中，而后再 store.loadData(data);
我觉得这方法有一个问题就是与方法一同样会遇到 pagingBar 上下页按纽请求的是一个url Ajax请求。这是不对的。我得看看王蕴真怎么解决这个问题。
2. Ext gird 切换store。
有时候，我们一个grid表格是的数据可能来自不同的地方，有的可能来的自己的网站，有的可能是别人提供的服务，这个时候很有可能两个地方返回的json数据结
构是不一样的。但是必须同时在一个grid中切换，这个时候一个较好的解决方法就是用两个或更多的store.
这里给一个例子：
initComponent: function() {
var users = new Ext.data.JsonStore({
storeId: 'users',
url: '/users',
});
var schoolars = new Ext.data.JsonStore({
storeId: 'schoolars',
url: '/peoples',
});
var pagingBar = new Ext.FrontPagingToolbar({
pageSize: 3,
store : users
});
Ext.grid.InnovatorGridPanel.superclass.initComponent.call(Ext.apply(this, {
bbar : pagingBar,
pageBar : pagingBar,
store : users
}));
},
swithStore : function(network) {
if ('Scholar Universe' == network.name) {
this.reconfigure( Ext.StoreMgr.get('schoolars'), new Ext.grid.ColumnModel(this.columns));
this.pageBar.bind(Ext.StoreMgr.get('schoolars'));
} else {
this.reconfigure( Ext.StoreMgr.get('users'), new Ext.grid.ColumnModel(this.columns));
this.pageBar.bind(Ext.StoreMgr.get('users'));
}
this.pageBar.paramNames = {network:network,start:0,limit:3};
}
关键在
this.reconfigure( Ext.StoreMgr.get('schoolars'), new Ext.grid.ColumnModel(this.columns));
this.pageBar.bind(Ext.StoreMgr.get('schoolars'));
它们更换了grid的store.并将分页也重新关联到新的store上。
扫一扫
261
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
