git.roojs.org Git - roojs1/blob - examples/tree/ColumnTree.js

   1 //<Script type="text/javascript">
   2
   3 Roo.tree.ColumnTree = Roo.extend(Roo.tree.TreePanel, {
   4     lines:false,
   5     borderWidth: Roo.isBorderBox ? 0 : 2, // the combined left/right border for each cell
   6
   7
   8     render : function(){
   9         // add the header.....
  10
  11         Roo.tree.ColumnTree.superclass.render.apply(this);
  12
  13         this.el.addClass('x-column-tree');
  14
  15         this.headers = this.el.createChild(
  16             {cls:'x-tree-headers'},this.innerCt.dom);
  17
  18         var cols = this.columns, c;
  19         var totalWidth = 0;
  20
  21         for(var i = 0, len = cols.length; i < len; i++){
  22              c = cols[i];
  23              totalWidth += c.width;
  24              this.headers.createChild({
  25                  cls:'x-tree-hd ' + (c.cls?c.cls+'-hd':''),
  26                  cn: {
  27                      cls:'x-tree-hd-text',
  28                      html: c.header
  29                  },
  30                  style:'width:'+(c.width-this.borderWidth)+'px;'
  31              });
  32         }
  33         this.headers.createChild({cls:'x-clear'});
  34         // prevent floats from wrapping when clipped
  35         this.headers.setWidth(totalWidth);
  36         //this.innerCt.setWidth(totalWidth);
  37         this.innerCt.setWidth(this.width);
  38         this.innerCt.setHeight(this.height-20);
  39         this.innerCt.setStyle({ overflow: 'auto' });
  40
  41
  42     }
  43 });
  44
  45 Roo.tree.ColumnNodeUI = Roo.extend(Roo.tree.TreeNodeUI, {
  46     //focus: Roo.emptyFn, // prevent odd scrolling behavior
  47
  48     renderElements : function(n, a, targetNode, bulkRender){
  49         //consel.log("renderElements?");
  50         this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
  51
  52         var t = n.getOwnerTree();
  53         var cols = t.columns;
  54         var bw = t.borderWidth;
  55         var c = cols[0];
  56         var href = a.href ? a.href : Roo.isGecko ? "" : "#";
  57          var cb = typeof a.checked == "boolean";
  58
  59         var buf = [
  60             '<li class="x-tree-node">',
  61
  62
  63                 '<div class="x-tree-node-el ', a.cls,'">',
  64                     // extran...
  65                     '<div class="x-tree-col" style="width:', c.width-bw, 'px;">',
  66
  67
  68                         '<span class="x-tree-node-indent">',this.indentMarkup,'</span>',
  69                         '<img src="', this.emptyIcon, '" class="x-tree-ec-icon  " />',
  70                         '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',
  71                            (a.icon ? ' x-tree-node-inline-icon' : ''),
  72                            (a.iconCls ? ' '+a.iconCls : ''),
  73                            '" unselectable="on" />',
  74                         (cb ? ('<input class="x-tree-node-cb" type="checkbox" ' +
  75                              (a.checked ? 'checked="checked" />' : ' />')) : ''),
  76
  77                         '<a class="x-tree-node-anchor" hidefocus="on" href="',href,'" tabIndex="1" ',
  78                             (a.hrefTarget ? ' target="' +a.hrefTarget + '"' : ''),
  79                             '><span unselectable="on">',
  80                               n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),
  81                              '</span></a>' ,
  82                   '</div>'
  83                  ];
  84
  85          for(var i = 1, len = cols.length; i < len; i++){
  86              c = cols[i];
  87
  88              buf.push('<div class="x-tree-col ',(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">',
  89                         '<div class="x-tree-col-text">',(c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</div>",
  90                       "</div>");
  91          }
  92
  93          buf.push(
  94             '<div class="x-clear"></div></div>',
  95             '<ul class="x-tree-node-ct" style="display:none;"></ul>',
  96             "</li>");
  97
  98         if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
  99             this.wrap = Roo.DomHelper.insertHtml("beforeBegin",
 100                                 n.nextSibling.ui.getEl(), buf.join(""));
 101         }else{
 102             this.wrap = Roo.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
 103         }
 104         var el = this.wrap.childNodes[0];
 105         this.elNode = el.firstChild;
 106         this.ctNode = this.wrap.childNodes[1];
 107         var cs = el.firstChild.childNodes;
 108         this.indentNode = cs[0];
 109         this.ecNode = cs[1];
 110         this.iconNode = cs[2];
 111         var index = 3;
 112         if(cb){
 113             this.checkbox = cs[3];
 114             index++;
 115         }
 116         this.anchor = cs[index];
 117         this.textNode = cs[index].firstChild;
 118
 119        // console.log(this);
 120     }
 121
 122 });