extjs 之columntree 自定义分页工具条

前提：columntree.js

/*

 * Ext JS Library 2.0 
 * Copyright(c) 2006-2007, Ext JS, LLC. 
 * [email protected] 
 *  
 * 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-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />'
: '/>'))
: '',
'<a hidefocus="on" class="x-tree-node-anchor" href="',
href,
'" tabIndex="1" ',
a.hrefTarget ? ' target="' + a.hrefTarget + '"'
: "",
'>',
'<span unselectable="on">',
n.text
|| (a[c.dataIndex] ? (c.renderer ? c
.renderer(a[c.dataIndex], n, a)
: a[c.dataIndex]) : ''),
" </span></a>", "</div>" ];
for ( var i = 1, len = cols.length; i < len; i++) {
c = cols[i];
buf.push('<div class="x-tree-col ', (c.cls ? c.cls
: ''), '" style="width:', c.width - bw,
'px;">', '<div class="x-tree-col-text">',
(a[c.dataIndex] ? (c.renderer ? c.renderer(
a[c.dataIndex], n, a)
: a[c.dataIndex]) : ''),
" </div>", "</div>");
}
buf
.push(
'<div class="x-clear"></div>',
'</div>',
'<ul class="x-tree-node-ct" style="display:none;"></ul>',
"</li>");


if (bulkRender !== true && n.nextSibling
&& n.nextSibling.ui.getEl()) {
this.wrap = Ext.DomHelper.insertHtml("beforeBegin",
n.nextSibling.ui.getEl(), buf.join(""));
} else {
this.wrap = Ext.DomHelper.insertHtml("beforeEnd",
targetNode, buf.join(""));
}
this.elNode = this.wrap.childNodes[0];
this.ctNode = this.wrap.childNodes[1];
var cs = this.elNode.firstChild.childNodes;
this.indentNode = cs[0];
this.ecNode = cs[1];
this.iconNode = cs[2];


var index = 3;
if (cb) {
this.checkbox = cs[3];
index++;
}
this.anchor = cs[index];
this.textNode = cs[index].firstChild;
}
});
// 这个组件是扩展的，加入这个组件即可
Ext.ux.ColumnTreeCheckNodeUI = function() {
// 多选: 'multiple'(默认)
// 单选: 'single'
// 级联多选: 'cascade'(同时选父和子);'parentCascade'(选父);'childCascade'(选子)
this.checkModel = 'multiple';


// only leaf can checked
this.onlyLeafCheckable = false;


Ext.ux.ColumnTreeCheckNodeUI.superclass.constructor.apply(this, arguments);
};
Ext.extend(Ext.ux.ColumnTreeCheckNodeUI, Ext.tree.ColumnTreeNodeUI, {


renderElements : function(n, a, targetNode, bulkRender) {
var t = n.getOwnerTree();
this.checkModel = t.checkModel || this.checkModel;
this.onlyLeafCheckable = t.onlyLeafCheckable || false;


Ext.ux.ColumnTreeCheckNodeUI.superclass.renderElements.apply(this,
arguments);


var cb = (!this.onlyLeafCheckable || n.isLeaf());
if (cb) {
Ext.fly(this.checkbox).on('click',
this.check.createDelegate(this, [ null ]));
}
},


// private
check : function(checked) {
var n = this.node;
var tree = n.getOwnerTree();
this.checkModel = tree.checkModel || this.checkModel;


if (checked === null) {
checked = this.checkbox.checked;
} else {
this.checkbox.checked = checked;
}


n.attributes.checked = checked;
tree.fireEvent('check', n, checked);


if (!this.onlyLeafCheckable) {
if (this.checkModel == 'cascade'
|| this.checkModel == 'parentCascade') {
var parentNode = n.parentNode;
if (parentNode !== null) {
this.parentCheck(parentNode, checked);
}
}
if (this.checkModel == 'cascade'
|| this.checkModel == 'childCascade') {
if (!n.expanded && !n.childrenRendered) {
n.expand(false, false, this.childCheck);
} else {
this.childCheck(n);
}
}
} else if (this.checkModel == 'single') {
var checkedNodes = tree.getChecked();
for ( var i = 0; i < checkedNodes.length; i++) {
var node = checkedNodes[i];
if (node.id != n.id) {
node.getUI().checkbox.checked = false;
node.attributes.checked = false;
tree.fireEvent('check', node, false);
}
}
}
},


// private
childCheck : function(node) {
var a = node.attributes;
if (!a.leaf) {
var cs = node.childNodes;
var csui;
for ( var i = 0; i < cs.length; i++) {
csui = cs[i].getUI();
if (csui.checkbox.checked ^ a.checked)
csui.check(a.checked);
}
}
},


// private
parentCheck : function(node, checked) {
var checkbox = node.getUI().checkbox;
if (typeof checkbox == 'undefined')
return;
if (!(checked ^ checkbox.checked))
return;
if (!checked && this.childHasChecked(node))
return;
checkbox.checked = checked;
node.attributes.checked = checked;
node.getOwnerTree().fireEvent('check', node, checked);


var parentNode = node.parentNode;
if (parentNode !== null) {
this.parentCheck(parentNode, checked);
}
},


// private
childHasChecked : function(node) {
var childNodes = node.childNodes;
if (childNodes || childNodes.length > 0) {
for ( var i = 0; i < childNodes.length; i++) {
if (childNodes[i].getUI().checkbox.checked)
return true;
}
}
return false;
},


toggleCheck : function(value) {
var cb = this.checkbox;
if (cb) {
var checked = (value === undefined ? !cb.checked : value);
this.check(checked);
}
}
});

2.自定义分页工具条

var bt_first = new Ext.Toolbar.Button({
tooltip : "第一页",
overflowText : "第一页",
iconCls : 'x-tbar-page-first',
disabled : false,
enable : true,
handler : do_first
});


var bt_prev = new Ext.Toolbar.Button({
tooltip : "前一页",
overflowText : "前一页",
iconCls : 'x-tbar-page-prev',
disabled : false,
enable : true,
handler : do_prev
});
var bt_number = new Ext.form.NumberField({
cls : 'x-tbar-page-number',
allowDecimals : false,
allowNegative : false,
enableKeyEvents : true,
selectOnFocus : true,
submitValue : false,
listeners : {
keydown : onPagingKeyDown
}
});
bt_number.setValue(curPageNum);


var bt_next = new Ext.Toolbar.Button({
tooltip : "下一页",
overflowText : "下一页",
iconCls : 'x-tbar-page-next',
disabled : false,
enable : true,
handler : do_next
});


var bt_last = new Ext.Toolbar.Button({
tooltip : "最后页",
overflowText : "最后页",
iconCls : 'x-tbar-page-last',
disabled : false,
enable : true,
handler : do_last
});


var bt_refresh = new Ext.Toolbar.Button({
tooltip : "刷新",
overflowText : "刷新",
iconCls : 'x-tbar-loading',
disabled : false,
enable : true,
handler : do_refresh
});


var lb_num = new Ext.form.Label({
text : '0'
});


function do_first() {
start = 0;
log_search();
curPageNum = 1;
bt_number.setValue(curPageNum);
}


function do_next() {
start = start + limit;
log_search();
curPageNum = curPageNum + 1;
bt_number.setValue(curPageNum);
}


function do_last() {
start = (maxPageCount - 1) * pagesize;
log_search();
curPageNum = maxPageCount;
bt_number.setValue(curPageNum);
}


function do_prev() {
start = start - pagesize;
log_search();
curPageNum = curPageNum - 1;
bt_number.setValue(curPageNum);
}

function onPagingKeyDown(txtfield, e) {
if (e.getKey() == Ext.EventObject.ENTER) {
if (bt_number.getValue() != "") {
start = (parseInt(bt_number.getValue()) - 1) * pagesize;
log_search();
} else
alert(bt_number.getValue());


}
}
function do_refresh() {
log_search();
}
var m_toolbar = new Ext.Toolbar({
items : [ bt_first, bt_prev, '-', '第', bt_number, '页', '共', lb_num,
'页', '-', bt_next, bt_last, bt_refresh ]
});

在Tree中加载自定义工具条

test_log_tree = new Ext.tree.ColumnTree({
region : 'south',
border : true,
rootVisible : false,
split : true,
columnLines : true,
autoScroll : true,
tbar : [ log_p_buttons ],                //代码在这里,加载自定义工具条
height : Glb.outer_center.getHeight() * 0.70,
loader : log_treeloader,
columns : [ {
header : '名称',
width : 150,
dataIndex : 'text'
}, {
header : '描述',
width : 250,
dataIndex : 'description'
}, {
header : '状态',
width : 100,
dataIndex : 'status_str'
}, {
header : '执行时间',
width : 150,
dataIndex : 'create_time'
}, {
header : '步骤日志',
width : 600,
dataIndex : 'loginfo'
}


],
root : new Ext.tree.AsyncTreeNode({
text : '测试日志'
}),
bbar : m_toolbar,
listeners : {
beforeload : function(n) {
/*
test_log_tree.getLoader().dataUrl = 'GetTestLog';
test_log_tree.getLoader().uiProviders = {
'col' : Ext.tree.ColumnTreeNodeUI
};
*/
}
}
});

加载数据

function log_search() {
getMaxSize();
beloaded = false;
if (taskid <= 0)
taskid = -2;
test_log_tree.root.attributes.children = false;
//Read4();    //加载滚动条代码，不是本文重点，可以不关注
test_log_tree.root.reload();
test_log_tree.root.collapse(true, true);

}

log_treeloader.on('beforeload', function() {
if (start <= 0)
start = 0;
if (limit <= 0)
limit = limit;
var runner = log_lb_runner.getValue();
var projectid = log_combo_project.getValue();
var casename = log_lb_case.getValue();
var module = log_lb_module.getValue();
var planname = log_lb_plan.getValue();


var bdate = begin_date.getValue();
var edate = end_date.getValue();
var sbdate = "";
if (bdate != "")
sbdate = bdate.format('Y-m-d');
else
sbdate = "";


if (edate != "")
edate = edate.format('Y-m-d');
if (planname == "")
planid = -1;
Ext.apply(this.baseParams, {
start : start,
limit : limit,
taskid : taskid,
runner : runner,
projectid : projectid,
casename : casename,
module : module,
planname : planname,
begindate : sbdate,
enddate : edate,
planid : planid
});
});

取得所有记录条数

function getMaxSize() {
if (start <= 0)
start = 0;
if (limit <= 0)
limit = limit;
var runner = log_lb_runner.getValue();
var projectid = log_combo_project.getValue();
var casename = log_lb_case.getValue();
var module = log_lb_module.getValue();
var planname = log_lb_plan.getValue();
var bdate = begin_date.getValue();
var edate = end_date.getValue();
var sbdate = "";
if (bdate != "")
sbdate = bdate.format('Y-m-d');
else
sbdate = "";


if (edate != "")
edate = edate.format('Y-m-d');
if (planname == "")
planid = -1;
Ext.Ajax.request({
url : 'GetTestLogCount',
params : {
start : 0,
limit : limit,
taskid : taskid,
runner : runner,
projectid : projectid,
casename : casename,
module : module,
planname : planname,
begindate : sbdate,
enddate : edate,
planid : planid
},
success : function(response) {
treedata = response.responseText;
realCount = Ext.decode(treedata).totalCount;
// alert(realCount);
maxPageCount = Math.ceil(realCount / pagesize);
lb_num.setText(maxPageCount);
},
failure : function() {
Ext.Msg.alert("提示", "连接数据库错误或连接超时！");
}
});
}