【ExtJS实践】之二：TreeGrid显示复选框

ExtJS3.4的TreeGrid不提供Tree那样的Checkbox树。从网上搜索了一下，找到了国外的一个例子可以解决此问题。

资料地址：https://gist.github.com/745436

实现步骤：

1、修改TreeGridNodeUI.js文件，修改后的文件全文如下：

  1 /*!
  2  * Ext JS Library 3.4
  3  * Copyright(c) 2006-2010 Sencha Inc.
  4  * licensing@sencha.com
  5  * http://www.sencha.com/license
  6  */
  7 /**
  8  * @class Ext.ux.tree.TreeGridNodeUI
  9  * @extends Ext.tree.TreeNodeUI
 10  */
 11 Ext.ux.tree.TreeGridNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
 12     isTreeGridNodeUI: true,
 13 
 14     renderElements : function(n, a, targetNode, bulkRender){
 15         var t = n.getOwnerTree(),
 16             cols = t.columns,
 17             c = cols[0],
 18             i, buf, len;
 19 
 20         this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
 21 
 22     var cb = Ext.isBoolean(a.checked);
 23         buf = [
 24              '<tbody class="x-tree-node">',
 25                 '<tr ext:tree-node-id="', n.id ,'" class="x-tree-node-el x-tree-node-leaf ', a.cls, '">',
 26                     '<td class="x-treegrid-col">',
 27                         '<span class="x-tree-node-indent">', this.indentMarkup, "</span>",
 28                         '<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow" />',
 29                         '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon', (a.icon ? " x-tree-node-inline-icon" : ""), (a.iconCls ? " "+a.iconCls : ""), '" unselectable="on" />',
 30             cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : '/>')) : '',
 31                         '<a hidefocus="on" class="x-tree-node-anchor" href="', a.href ? a.href : '#', '" tabIndex="1" ',
 32                             a.hrefTarget ? ' target="'+a.hrefTarget+'"' : '', '>',
 33                         '<span unselectable="on">',
 34             (c.tpl ? c.tpl.apply(a) : a[c.dataIndex] || c.text),
 35             '</span></a>',
 36                     '</td>'
 37         ];
 38 
 39         for(i = 1, len = cols.length; i < len; i++){
 40             c = cols[i];
 41             buf.push(
 42                     '<td class="x-treegrid-col ', (c.cls ? c.cls : ''), '">',
 43                         '<div unselectable="on" class="x-treegrid-text"', (c.align ? ' style="text-align: ' + c.align + ';"' : ''), '>',
 44                             (c.tpl ? c.tpl.apply(a) : a[c.dataIndex]),
 45                         '</div>',
 46                     '</td>'
 47             );
 48         }
 49 
 50         buf.push(
 51             '</tr><tr class="x-tree-node-ct"><td colspan="', cols.length, '">',
 52             '<table class="x-treegrid-node-ct-table" cellpadding="0" cellspacing="0" style="table-layout: fixed; display: none; width: ', t.innerCt.getWidth() ,'px;"><colgroup>'
 53         );
 54         for(i = 0, len = cols.length; i<len; i++) {
 55             buf.push('<col style="width: ', (cols[i].hidden ? 0 : cols[i].width) ,'px;" />');
 56         }
 57         buf.push('</colgroup></table></td></tr></tbody>');
 58 
 59         if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
 60             this.wrap = Ext.DomHelper.insertHtml("beforeBegin", n.nextSibling.ui.getEl(), buf.join(''));
 61         }else{
 62             this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(''));
 63         }
 64 
 65         this.elNode = this.wrap.childNodes[0];
 66         this.ctNode = this.wrap.childNodes[1].firstChild.firstChild;
 67         var cs = this.elNode.firstChild.childNodes;
 68 
 69         this.indentNode = cs[0];
 70         this.ecNode = cs[1];
 71         this.iconNode = cs[2];
 72 
 73     if (cb) {
 74       this.checkbox = cs[3];
 75       this.anchor = cs[4];
 76       this.textNode = cs[4].firstChild;
 77     } else {
 78       this.anchor = cs[3];
 79       this.textNode = cs[3].firstChild;
 80     }
 81     },
 82 
 83     // private
 84     animExpand : function(cb){
 85         this.ctNode.style.display = "";
 86         Ext.ux.tree.TreeGridNodeUI.superclass.animExpand.call(this, cb);
 87     }
 88 });
 89 
 90 Ext.ux.tree.TreeGridRootNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
 91     isTreeGridNodeUI: true,
 92 
 93     // private
 94     render : function(){
 95         if(!this.rendered){
 96             this.wrap = this.ctNode = this.node.ownerTree.innerCt.dom;
 97             this.node.expanded = true;
 98         }
 99 
100         if(Ext.isWebKit) {
101             // weird table-layout: fixed issue in webkit
102             var ct = this.ctNode;
103             ct.style.tableLayout = null;
104             (function() {
105                 ct.style.tableLayout = 'fixed';
106             }).defer(1);
107         }
108     },
109 
110     destroy : function(){
111         if(this.elNode){
112             Ext.dd.Registry.unregister(this.elNode.id);
113         }
114         delete this.node;
115     },
116 
117     collapse : Ext.emptyFn,
118     expand : Ext.emptyFn
119 });

其中，标黄色背景的代码就是需增加的代码。

2、在TreeGrid显示的数据中，每一个节点都增加一个checked属性。true，复选框被选中；false，复选框不被选中。

posted on 2012-06-11 16:21 EricZhen 阅读(4699) 评论(1) 编辑收藏举报

【ExtJS实践】之二 ：TreeGrid显示复选框

【ExtJS实践】之二：TreeGrid显示复选框