examples/ux/treegrid/TreeGridNodeUI.js

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