checkBoxColunmTree.html
可以选择节点的多列的树，也可以说是可以分组选择的grid。既是tree也是grid。
column-tree.css这个文件在ext2.2版本中的ext-2.2/examples/tree这个目录下会找到这个文件的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>checkBoxColunmTree.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ext/resources/css/column-tree.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext/ColumnTree.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
Ext.BLANK_IMAGE_URL = "ext/resources/images/default/s.gif";
var tree = new Ext.tree.ColumnTree({
width:568,
height:300,
border: false,
lines: false,
animate: false,
rootVisible: false,
autoScroll:true,
checkModel:"cascade",//级联多选，如果不需要checkbox,该属性去掉
onlyLeafCheckable: false,//所有结点可选，如果不需要checkbox,该属性去掉
loader: new Ext.tree.TreeLoader({
dataUrl: "../TreeDataServlet",//"column-data.json",
uiProviders:{
"col": Ext.ux.ColumnTreeCheckNodeUI//如果不需要checkbox,则需要使用Ext.tree.ColumnTreeNodeUI
}
}),
columns:[
{ header:"商品名称", width:170, dataIndex:"commodityName"},
{ header:"编号", width:70, dataIndex:"id"},
{ header:"代理/公司", width:180, dataIndex:"proxyName" },
{ header:"价格", width:70, dataIndex:"price"}
],
root: new Ext.tree.AsyncTreeNode({
text: "代理/公司"
}),
tbar:["公司名称：",{xtype:"textfield",id:"proxyName"},"商品名称：",{xtype:"textfield",id:"commodityName"},{text:"查询"}]
});
var win = new Ext.Window({
title: "Example column tree",
width:582,
height:388,
border :true,
resizable : false,
items: tree,
buttonAlign:"center",
buttons:[{text:"确定"},{text:"关闭"}]
});
win.show();
});
</script>
</head>
<body>
</body>
</html>
后台java代码
TreeDataServlet.java
package com.hoo.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class TreeDataServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/text");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
StringBuffer resultStr = new StringBuffer();
resultStr.append("[{");
resultStr.append("id: " 10000",");
resultStr.append("commodityName: "微软鼠标",");
resultStr.append("uiProvider: "col",");
//得到group 值
resultStr.append("children: [{");
resultStr.append("id: " 100000",");
resultStr.append("proxyName: "微软代理商-中国代理 联强 ",");
resultStr.append("commodityName: "IO 1.0",");
resultStr.append("price: "198.00",");
resultStr.append("leaf:true,");
resultStr.append("uiProvider: "col"},");
resultStr.append("{id: " 100000",");
resultStr.append("proxyName: "微软代理商-中国代理 联强 ",");
resultStr.append("commodityName: "IE 3.0",");
resultStr.append("price: "298.00",");
resultStr.append("leaf:true,");
resultStr.append("uiProvider: "col"},");
resultStr.append("{id: " 100000",");
resultStr.append("proxyName: "微软代理商-中国代理 联强 ",");
resultStr.append("commodityName: "IO 2.0",");
resultStr.append("price: "200.00",");
resultStr.append("leaf:true,");
resultStr.append("uiProvider: "col"");
resultStr.append("}]},{");
resultStr.append("id: " 20000",");
resultStr.append("commodityName: "罗技鼠标",");
resultStr.append("uiProvider: "col",");
//得到group 值
resultStr.append("children: [{");
resultStr.append("id: " 100001",");
resultStr.append("proxyName: "罗技",");
resultStr.append("commodityName: "max 500",");
resultStr.append("price: "298.00",");
resultStr.append("leaf:true,");
resultStr.append("uiProvider: "col"},");
resultStr.append("{id: " 100000",");
resultStr.append("proxyName: "罗技",");
resultStr.append("commodityName: "max 518",");
resultStr.append("price: "298.00",");
resultStr.append("leaf:true,");
resultStr.append("uiProvider: "col"},");
resultStr.append("{id: " 100000",");
resultStr.append("proxyName: "罗技",");
resultStr.append("commodityName: "max 520",");
resultStr.append("price: "245.00",");
resultStr.append("leaf:true,");
resultStr.append("uiProvider: "col"");
resultStr.append("}]");
resultStr.append("}]");
out.print(resultStr.toString());
out.flush();
out.close();
}
}
ext/ColumnTree.js
这个是扩展Ext.tree.ColumnTree的组件，只是添加了一个Ext.ux.ColumnTreeCheckNodeUI组件。有了这个组件我们才可以选择节点，所以这个是必须的；
/*
* 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(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);
}
}
});