extjs 之columntree 自定义分页工具条

前提：columntree.js

/*

 * Ext JS Library 2.0 
 * Copyright(c) 2006-2007, Ext JS, LLC. 
 * licensing@extjs.com 
 *  
 * http://extjs.com/license 
 */
Ext.tree.ColumnTree = Ext.extend(Ext.tree.TreePanel, {
// lines:false,
borderWidth : Ext.isBorderBox ? 0 : 2, // the combined left/right border
// for each cell
cls : 'x-column-tree',
scrollOffset : 18,


onRender : function() {
Ext.tree.ColumnTree.superclass.onRender.apply(this, arguments);
this.headers = this.body.createChild({
cls : 'x-tree-headers '
}, this.body.dom);
var cols = this.columns, c;
var totalWidth = 0;
for ( var i = 0, len = cols.length; i < len; i++) {
c = cols[i];
totalWidth += c.width;
this.headers.createChild({
cls : 'x-tree-hd ' + (c.cls ? c.cls + '-hd' : ''),
cn : {
cls : 'x-tree-hd-text',
html : c.header
},
style : 'width:' + (c.width - this.borderWidth) + 'px;'
});
}


this.headers.createChild({
cls : 'x-tree-hd ',
cn : {
html : ''
},
style : 'width:' + this.scrollOffset + 'px;'
});
totalWidth += this.scrollOffset;


this.headers.createChild({
cls : 'x-clear'
});
// prevent floats from wrapping when clipped
this.headers.setWidth(totalWidth);
totalWidth -= this.scrollOffset;
this.innerCt.setWidth(totalWidth);
}
});
Ext.tree.ColumnTreeNodeUI = Ext
.extend(
Ext.tree.TreeNodeUI,
{
focus : Ext.emptyFn, // prevent odd scrolling behavior
renderElements : function(n, a, targetNode, bulkRender) {
this.indentMarkup = n.parentNode ? n.parentNode.ui
.getChildIndent() : '';
var t = n.getOwnerTree();
var cols = t.columns;
var bw = t.borderWidth;
var c = cols[0];
var cb = typeof a.checked == 'boolean';
if (typeof this.checkModel != 'undefined') {
cb = (!this.onlyLeafCheckable || n.isLeaf());
}
var href = a.href ? a.href : Ext.isGecko ? "" : "#";
var buf = [
'<li class="x-tree-node"><div ext:tree-node-id="',
n.id,
'" class="x-tree-node-el x-tree-node-leaf x-unselectable ',
a.cls,
'" unselectable="on">',
'<div class="x-tree-col" style="width:',
c.width - bw,
'px;">',
'<span class="x-tree-node-indent">',
this.indentMarkup,
"</span>",
'<img src="',
this.emptyIcon,
'" class="x-tree-ec-icon x-tree-elbow">',
'<img src="',
a.icon || this.emptyIcon,
'" class="x-tree-node-icon',
(a.icon ? " x-tree-node-inline-icon" : ""),
(a.iconCls ? " " + a.iconCls : ""),
'" unselectable="on">',
cb ? ('<input class="x-tree-nod