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-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(falsefalsethis.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(truetrue); 



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("提示""连接数据库错误或连接超时!"); 

}); 


 本文转自elbertchen 51CTO博客,原文链接:http://blog.51cto.com/linkyou/751921,如需转载请自行联系原作者
 
上一篇:WCF4.0新特性体验(8):自定义绑定实现字节流编码(ByteStream)


下一篇:Microsoft Enterprise Library 5.0 系列教程(一) Caching Application Block (高级)