checkBoxColunmTree.html

    可以选择节点的多列的树，也可以说是可以分组选择的grid。既是tree也是grid。

    column-tree.css这个文件在ext2.2版本中的ext-2.2/examples/tree这个目录下会找到这个文件的。

    1.       <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    2. <html>  
    3.   <head>  
    4.     <title>checkBoxColunmTree.html</title>  
    6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    7.     <meta http-equiv="description" content="this is my page">  
    8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
    9.     <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />  
    10.     <link rel="stylesheet" type="text/css" href="ext/resources/css/column-tree.css" />  
    11.     <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>  
    12.     <script type="text/javascript" src="ext/ext-all.js"></script>  
    13.     <script type="text/javascript" src="ext/ColumnTree.js"></script>  
    15.     <script type="text/javascript">  
    16.         Ext.onReady(function () {  
    17.             Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';  
    18.             var tree = new Ext.tree.ColumnTree({     
    19.                 width:568,     
    20.                 height:300,     
    21.                 border: false,     
    22.                 lines: false,     
    23.                 animate: false,     
    24.                 rootVisible: false,     
    25.                 autoScroll:true,     
    26.                 checkModel:'cascade',//级联多选，如果不需要checkbox,该属性去掉     
    27.                 onlyLeafCheckable: false,//所有结点可选，如果不需要checkbox,该属性去掉     
    28.                 loader: new Ext.tree.TreeLoader({  
    29.                     dataUrl: '../TreeDataServlet',//'column-data.json',  
    30.                     uiProviders:{  
    31.                         'col': Ext.ux.ColumnTreeCheckNodeUI//如果不需要checkbox,则需要使用Ext.tree.ColumnTreeNodeUI     
    32.                     }  
    33.                 }),  
    34.                 columns:[     
    35.                     { header:'商品名称', width:170, dataIndex:'commodityName'},     
    36.                     { header:'编号', width:70, dataIndex:'id'},    
    37.                     { header:'代理/公司', width:180, dataIndex:'proxyName' },     
    38.                     { header:'价格', width:70, dataIndex:'price'}    
    39.                 ],     
    40.                 root: new Ext.tree.AsyncTreeNode({  
    41.                     text: '代理/公司'  
    42.                 }),  
    43.                 tbar:['公司名称：',{xtype:'textfield',id:'proxyName'},'商品名称：',{xtype:'textfield',id:'commodityName'},{text:'查询'}]     
    44.             });     
    45.             var win = new Ext.Window({     
    46.                 title: 'Example column tree',     
    47.                 width:582,     
    48.                 height:388,     
    49.                 border :true,     
    50.                 resizable : false,     
    51.                 items: tree,     
    52.                 buttonAlign:'center',     
    53.                 buttons:[{text:'确定'},{text:'关闭'}]     
    54.             });     
    55.             win.show();    
    56.         });  
    57.     </script>  
    58.   </head>  
    60.   <body>  
    61.   </body>  
    62. </html> 
    63.

    后台java代码

    TreeDataServlet.java 

    1.       package com.hoo.servlet;  
    2. import java.io.IOException;  
    3. import java.io.PrintWriter;  
    4. import javax.servlet.ServletException;  
    5. import javax.servlet.http.HttpServlet;  
    6. import javax.servlet.http.HttpServletRequest;  
    7. import javax.servlet.http.HttpServletResponse;  
    8. public class TreeDataServlet extends HttpServlet {  
    9.     public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
    10.         this.doPost(request, response);  
    11.     }  
    12.     public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
    13.         response.setContentType("text/text");  
    14.         response.setCharacterEncoding("UTF-8");  
    15.         PrintWriter out = response.getWriter();  
    17.         StringBuffer resultStr = new StringBuffer();  
    18.         resultStr.append("[{");  
    19.         resultStr.append("id: ' 10000',");  
    20.         resultStr.append("commodityName: '微软鼠标',");  
    21.         resultStr.append("uiProvider: 'col',");  
    22.         //得到group 值  
    23.         resultStr.append("children: [{");  
    24.             resultStr.append("id: ' 100000',");  
    25.             resultStr.append("proxyName: '微软代理商-中国代理 联强 ',");  
    26.             resultStr.append("commodityName: 'IO 1.0',");  
    27.             resultStr.append("price: '198.00',");  
    28.             resultStr.append("leaf:true,");  
    29.             resultStr.append("uiProvider: 'col'},");  
    31.             resultStr.append("{id: ' 100000',");  
    32.             resultStr.append("proxyName: '微软代理商-中国代理 联强 ',");  
    33.             resultStr.append("commodityName: 'IE 3.0',");  
    34.             resultStr.append("price: '298.00',");  
    35.             resultStr.append("leaf:true,");  
    36.             resultStr.append("uiProvider: 'col'},");  
    38.             resultStr.append("{id: ' 100000',");  
    39.             resultStr.append("proxyName: '微软代理商-中国代理 联强 ',");  
    40.             resultStr.append("commodityName: 'IO 2.0',");  
    41.             resultStr.append("price: '200.00',");  
    42.             resultStr.append("leaf:true,");  
    43.             resultStr.append("uiProvider: 'col'");  
    44.             resultStr.append("}]},{");  
    45.             resultStr.append("id: ' 20000',");  
    46.             resultStr.append("commodityName: '罗技鼠标',");  
    47.             resultStr.append("uiProvider: 'col',");  
    48.             //得到group 值  
    49.             resultStr.append("children: [{");  
    50.                 resultStr.append("id: ' 100001',");  
    51.                 resultStr.append("proxyName: '罗技',");  
    52.                 resultStr.append("commodityName: 'max 500',");  
    53.                 resultStr.append("price: '298.00',");  
    54.                 resultStr.append("leaf:true,");  
    55.                 resultStr.append("uiProvider: 'col'},");  
    57.                 resultStr.append("{id: ' 100000',");  
    58.                 resultStr.append("proxyName: '罗技',");  
    59.                 resultStr.append("commodityName: 'max 518',");  
    60.                 resultStr.append("price: '298.00',");  
    61.                 resultStr.append("leaf:true,");  
    62.                 resultStr.append("uiProvider: 'col'},");  
    64.                 resultStr.append("{id: ' 100000',");  
    65.                 resultStr.append("proxyName: '罗技',");  
    66.                 resultStr.append("commodityName: 'max 520',");  
    67.                 resultStr.append("price: '245.00',");  
    68.                 resultStr.append("leaf:true,");  
    69.                 resultStr.append("uiProvider: 'col'");  
    70.                 resultStr.append("}]");  
    71.         resultStr.append("}]");  
    73.         out.print(resultStr.toString());  
    74.         out.flush();  
    75.         out.close();  
    76.     }  
    77. }
    78.

    ext/ColumnTree.js

    这个是扩展Ext.tree.ColumnTree的组件，只是添加了一个Ext.ux.ColumnTreeCheckNodeUI组件。有了这个组件我们才可以选择节点，所以这个是必须的；

    1.       /* 
    2.  * Ext JS Library 2.0 
    3.  * Copyright(c) 2006-2007, Ext JS, LLC. 
    4.  * licensing@extjs.com 
    5.  *  
    6.  * http://extjs.com/license 
    7.  */  
    8. Ext.tree.ColumnTree = Ext.extend(Ext.tree.TreePanel, {  
    9.     //lines:false,  
    10.     borderWidth: Ext.isBorderBox ? 0 : 2, // the combined left/right border for each cell  
    11.     cls:'x-column-tree',  
    12.     scrollOffset : 18,  
    14.     onRender : function(){  
    15.         Ext.tree.ColumnTree.superclass.onRender.apply(this, arguments);  
    16.         this.headers = this.body.createChild(  
    17.             {cls:'x-tree-headers '},this.body.dom);  
    18.         var cols = this.columns, c;  
    19.         var totalWidth = 0;  
    20.         for(var i = 0, len = cols.length; i < len; i++){  
    21.              c = cols[i];  
    22.              totalWidth += c.width;  
    23.              this.headers.createChild({  
    24.                  cls:'x-tree-hd ' + (c.cls?c.cls+'-hd':''),  
    25.                  cn: {  
    26.                      cls:'x-tree-hd-text',  
    27.                      html: c.header  
    28.                  },  
    29.                  style:'width:'+(c.width-this.borderWidth)+'px;'  
    30.              });  
    31.         }  
    33.         this.headers.createChild({  
    34.              cls:'x-tree-hd ',  
    35.              cn: {  
    36.                  html: ''  
    37.              },  
    38.              style:'width:'+this.scrollOffset+'px;'  
    39.          });  
    40.         totalWidth += this.scrollOffset;  
    42.         this.headers.createChild({cls:'x-clear'});  
    43.         // prevent floats from wrapping when clipped  
    44.         this.headers.setWidth(totalWidth);  
    45.         totalWidth -= this.scrollOffset;  
    46.         this.innerCt.setWidth(totalWidth);  
    47.     }  
    48. });  
    49. Ext.tree.ColumnTreeNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {  
    50.     focus: Ext.emptyFn, // prevent odd scrolling behavior  
    51.     renderElements : function(n, a, targetNode, bulkRender){  
    52.         this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';  
    53.         var t = n.getOwnerTree();  
    54.         var cols = t.columns;  
    55.         var bw = t.borderWidth;  
    56.         var c = cols[0];  
    57.         var cb = typeof a.checked == 'boolean';  
    58.         if(typeof this.checkModel != 'undefined'){  
    59.             cb = (!this.onlyLeafCheckable || n.isLeaf());  
    60.         }  
    61.         var href = a.href ? a.href : Ext.isGecko ? "" : "#";  
    62.         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">',  
    63.                 '<div class="x-tree-col" style="width:',c.width-bw,'px;">',  
    64.                     '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",  
    65.                     '<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow">',  
    66.                     '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on">',  
    67.                     cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : '/>')) : '',  
    68.                     '<a hidefocus="on" class="x-tree-node-anchor" href="',href,'" tabIndex="1" ',  
    69.                     a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '>',  
    70.                     '<span unselectable="on">', n.text || (a[c.dataIndex]?(c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]):''),"&nbsp;</span></a>",  
    71.                 "</div>"];  
    72.          for(var i = 1, len = cols.length; i < len; i++){  
    73.              c = cols[i];  
    74.              buf.push('<div class="x-tree-col ',(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">',  
    75.                         '<div class="x-tree-col-text">',(a[c.dataIndex]?(c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]):''),"&nbsp;</div>",  
    76.                       "</div>");  
    77.          }  
    78.          buf.push('<div class="x-clear"></div>',  
    79.             '</div>',  
    80.             '<ul class="x-tree-node-ct" style="display:none;"></ul>',  
    81.             "</li>");  
    83.         if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){  
    84.             this.wrap = Ext.DomHelper.insertHtml("beforeBegin",n.nextSibling.ui.getEl(), buf.join(""));  
    85.         }else{  
    86.             this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));  
    87.         }  
    88.         this.elNode = this.wrap.childNodes[0];  
    89.         this.ctNode = this.wrap.childNodes[1];  
    90.         var cs = this.elNode.firstChild.childNodes;  
    91.         this.indentNode = cs[0];  
    92.         this.ecNode = cs[1];  
    93.         this.iconNode = cs[2];  
    95.         var index = 3;  
    96.         if(cb){  
    97.             this.checkbox = cs[3];  
    98.             index++;  
    99.         }  
    100.         this.anchor = cs[index];  
    101.         this.textNode = cs[index].firstChild;  
    102.     }  
    103. });  
    104. //这个组件是扩展的，加入这个组件即可  
    105. Ext.ux.ColumnTreeCheckNodeUI = function() {  
    106.     //多选: 'multiple'(默认)  
    107.     //单选: 'single'  
    108.     //级联多选: 'cascade'(同时选父和子);'parentCascade'(选父);'childCascade'(选子)  
    109.     this.checkModel = 'multiple';  
    111.     //only leaf can checked  
    112.     this.onlyLeafCheckable = false;  
    114.     Ext.ux.ColumnTreeCheckNodeUI.superclass.constructor.apply(this, arguments);  
    115. };  
    116. Ext.extend(Ext.ux.ColumnTreeCheckNodeUI, Ext.tree.ColumnTreeNodeUI, {  
    118.     renderElements : function(n, a, targetNode, bulkRender){  
    119.         var t = n.getOwnerTree();  
    120.         this.checkModel = t.checkModel || this.checkModel;  
    121.         this.onlyLeafCheckable = t.onlyLeafCheckable || false;  
    123.         Ext.ux.ColumnTreeCheckNodeUI.superclass.renderElements.apply(this, arguments);  
    125.         var cb = (!this.onlyLeafCheckable || n.isLeaf());  
    126.         if(cb){  
    127.             Ext.fly(this.checkbox).on('click', this.check.createDelegate(this,[null]));  
    128.         }  
    129.     },  
    131.     // private  
    132.     check : function(checked){  
    133.         var n = this.node;  
    134.         var tree = n.getOwnerTree();  
    135.         this.checkModel = tree.checkModel || this.checkModel;  
    137.         if( checked === null ) {  
    138.             checked = this.checkbox.checked;  
    139.         } else {  
    140.             this.checkbox.checked = checked;  
    141.         }  
    143.         n.attributes.checked = checked;  
    144.         tree.fireEvent('check', n, checked);  
    146.         if(!this.onlyLeafCheckable){  
    147.             if(this.checkModel == 'cascade' || this.checkModel == 'parentCascade'){  
    148.                 var parentNode = n.parentNode;  
    149.                 if(parentNode !== null) {  
    150.                     this.parentCheck(parentNode,checked);  
    151.                 }  
    152.             }  
    153.             if(this.checkModel == 'cascade' || this.checkModel == 'childCascade'){  
    154.                 if( !n.expanded && !n.childrenRendered ) {  
    155.                     n.expand(false,false,this.childCheck);  
    156.                 }else {  
    157.                     this.childCheck(n);    
    158.                 }  
    159.             }  
    160.         } else if(this.checkModel == 'single'){  
    161.             var checkedNodes = tree.getChecked();  
    162.             for(var i=0;i<checkedNodes.length;i++){  
    163.                 var node = checkedNodes[i];  
    164.                 if(node.id != n.id){  
    165.                     node.getUI().checkbox.checked = false;  
    166.                     node.attributes.checked = false;  
    167.                     tree.fireEvent('check', node, false);  
    168.                 }  
    169.             }  
    170.         }  
    171.     },  
    173.     // private  
    174.     childCheck : function(node){  
    175.         var a = node.attributes;  
    176.         if(!a.leaf) {  
    177.             var cs = node.childNodes;  
    178.             var csui;  
    179.             for(var i = 0; i < cs.length; i++) {  
    180.                 csui = cs[i].getUI();  
    181.                 if(csui.checkbox.checked ^ a.checked)  
    182.                     csui.check(a.checked);  
    183.             }  
    184.         }  
    185.     },  
    187.     // private  
    188.     parentCheck : function(node ,checked){  
    189.         var checkbox = node.getUI().checkbox;  
    190.         if(typeof checkbox == 'undefined')return ;  
    191.         if(!(checked ^ checkbox.checked))return;  
    192.         if(!checked && this.childHasChecked(node))return;  
    193.         checkbox.checked = checked;  
    194.         node.attributes.checked = checked;  
    195.         node.getOwnerTree().fireEvent('check', node, checked);  
    197.         var parentNode = node.parentNode;  
    198.         if( parentNode !== null){  
    199.             this.parentCheck(parentNode,checked);  
    200.         }  
    201.     },  
    203.     // private  
    204.     childHasChecked : function(node){  
    205.         var childNodes = node.childNodes;  
    206.         if(childNodes || childNodes.length>0){  
    207.             for(var i=0;i<childNodes.length;i++){  
    208.                 if(childNodes[i].getUI().checkbox.checked)  
    209.                     return true;  
    210.             }  
    211.         }  
    212.         return false;  
    213.     },  
    215.     toggleCheck : function(value){  
    216.         var cb = this.checkbox;  
    217.         if(cb){  
    218.             var checked = (value === undefined ? !cb.checked : value);  
    219.             this.check(checked);  
    220.         }  
    221.     }  
    222. }); 
    223.