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

   1 //<Script type="text/javascript">
   2
   3 /*
   4  * Based on:
   5  * Ext JS Library 1.1.1
   6  * Copyright(c) 2006-2007, Ext JS, LLC.
   7  *
   8  * Originally Released Under LGPL - original licence link has changed is not relivant.
   9  *
  10  * Fork - LGPL
  11  * <script type="text/javascript">
  12  */
  13
  14
  15 /**
  16  * @class Roo.tree.ColumnTree
  17  * @extends Roo.data.TreePanel
  18  * @cfg {Object} columns  Including width, header, renderer, cls, dataIndex
  19  * @cfg {int} borderWidth  compined right/left border allowance
  20  * @constructor
  21  * @param {String/HTMLElement/Element} el The container element
  22  * @param {Object} config
  23  */
  24 Roo.tree.ColumnTree =  function(el, config)
  25 {
  26    Roo.tree.ColumnTree.superclass.constructor.call(this, el , config);
  27    this.addEvents({
  28         /**
  29         * @event resize
  30         * Fire this event on a container when it resizes
  31         * @param {int} w Width
  32         * @param {int} h Height
  33         */
  34        "resize" : true
  35     });
  36     this.on('resize', this.onResize, this);
  37 };
  38
  39 Roo.extend(Roo.tree.ColumnTree, Roo.tree.TreePanel, {
  40     //lines:false,
  41
  42
  43     borderWidth: Roo.isBorderBox ? 0 : 2,
  44     headEls : false,
  45
  46     render : function(){
  47         // add the header.....
  48
  49         Roo.tree.ColumnTree.superclass.render.apply(this);
  50
  51         this.el.addClass('x-column-tree');
  52
  53         this.headers = this.el.createChild(
  54             {cls:'x-tree-headers'},this.innerCt.dom);
  55
  56         var cols = this.columns, c;
  57         var totalWidth = 0;
  58         this.headEls = [];
  59         var  len = cols.length;
  60         for(var i = 0; i < len; i++){
  61              c = cols[i];
  62              totalWidth += c.width;
  63             this.headEls.push(this.headers.createChild({
  64                  cls:'x-tree-hd ' + (c.cls?c.cls+'-hd':''),
  65                  cn: {
  66                      cls:'x-tree-hd-text',
  67                      html: c.header
  68                  },
  69                  style:'width:'+(c.width-this.borderWidth)+'px;'
  70              }));
  71         }
  72         this.headers.createChild({cls:'x-clear'});
  73         // prevent floats from wrapping when clipped
  74         this.headers.setWidth(totalWidth);
  75         //this.innerCt.setWidth(totalWidth);
  76         this.innerCt.setStyle({ overflow: 'auto' });
  77         this.onResize(this.width, this.height);
  78
  79
  80     },
  81     onResize : function(w,h)
  82     {
  83         this.height = h;
  84         this.width = w;
  85         // resize cols..
  86         this.innerCt.setWidth(this.width);
  87         this.innerCt.setHeight(this.height-20);
  88
  89         // headers...
  90         var cols = this.columns, c;
  91         var totalWidth = 0;
  92         var expEl = false;
  93         var len = cols.length;
  94         for(var i = 0; i < len; i++){
  95             c = cols[i];
  96             if (this.autoExpandColumn !== false && c.dataIndex == this.autoExpandColumn) {
  97                 // it's the expander..
  98                 expEl  = this.headEls[i];
  99                 continue;
 100             }
 101             totalWidth += c.width;
 102
 103         }
 104         if (expEl) {
 105             expEl.setWidth(  ((w - totalWidth)-this.borderWidth - 20));
 106         }
 107         this.headers.setWidth(w-20);
 108
 109
 110
 111
 112     }
 113 });