/hippo/src/main/webapp/ext/src/widgets/layout/TableLayout.js

  1/*!
  2 * Ext JS Library 3.0.0
  3 * Copyright(c) 2006-2009 Ext JS, LLC
  4 * licensing@extjs.com
  5 * http://www.extjs.com/license
  6 */
  7/**
  8 * @class Ext.layout.TableLayout
  9 * @extends Ext.layout.ContainerLayout
 10 * <p>This layout allows you to easily render content into an HTML table.  The total number of columns can be
 11 * specified, and rowspan and colspan can be used to create complex layouts within the table.
 12 * This class is intended to be extended or created via the layout:'table' {@link Ext.Container#layout} config,
 13 * and should generally not need to be created directly via the new keyword.</p>
 14 * <p>Note that when creating a layout via config, the layout-specific config properties must be passed in via
 15 * the {@link Ext.Container#layoutConfig} object which will then be applied internally to the layout.  In the
 16 * case of TableLayout, the only valid layout config property is {@link #columns}.  However, the items added to a
 17 * TableLayout can supply the following table-specific config properties:</p>
 18 * <ul>
 19 * <li><b>rowspan</b> Applied to the table cell containing the item.</li>
 20 * <li><b>colspan</b> Applied to the table cell containing the item.</li>
 21 * <li><b>cellId</b> An id applied to the table cell containing the item.</li>
 22 * <li><b>cellCls</b> A CSS class name added to the table cell containing the item.</li>
 23 * </ul>
 24 * <p>The basic concept of building up a TableLayout is conceptually very similar to building up a standard
 25 * HTML table.  You simply add each panel (or "cell") that you want to include along with any span attributes
 26 * specified as the special config properties of rowspan and colspan which work exactly like their HTML counterparts.
 27 * Rather than explicitly creating and nesting rows and columns as you would in HTML, you simply specify the
 28 * total column count in the layoutConfig and start adding panels in their natural order from left to right,
 29 * top to bottom.  The layout will automatically figure out, based on the column count, rowspans and colspans,
 30 * how to position each panel within the table.  Just like with HTML tables, your rowspans and colspans must add
 31 * up correctly in your overall layout or you'll end up with missing and/or extra cells!  Example usage:</p>
 32 * <pre><code>
 33// This code will generate a layout table that is 3 columns by 2 rows
 34// with some spanning included.  The basic layout will be:
 35// +--------+-----------------+
 36// |   A    |   B             |
 37// |        |--------+--------|
 38// |        |   C    |   D    |
 39// +--------+--------+--------+
 40var table = new Ext.Panel({
 41    title: 'Table Layout',
 42    layout:'table',
 43    defaults: {
 44        // applied to each contained panel
 45        bodyStyle:'padding:20px'
 46    },
 47    layoutConfig: {
 48        // The total column count must be specified here
 49        columns: 3
 50    },
 51    items: [{
 52        html: '&lt;p&gt;Cell A content&lt;/p&gt;',
 53        rowspan: 2
 54    },{
 55        html: '&lt;p&gt;Cell B content&lt;/p&gt;',
 56        colspan: 2
 57    },{
 58        html: '&lt;p&gt;Cell C content&lt;/p&gt;',
 59        cellCls: 'highlight'
 60    },{
 61        html: '&lt;p&gt;Cell D content&lt;/p&gt;'
 62    }]
 63});
 64</code></pre>
 65 */
 66Ext.layout.TableLayout = Ext.extend(Ext.layout.ContainerLayout, {
 67    /**
 68     * @cfg {Number} columns
 69     * The total number of columns to create in the table for this layout.  If not specified, all Components added to
 70     * this layout will be rendered into a single row using one column per Component.
 71     */
 72
 73    // private
 74    monitorResize:false,
 75
 76    /**
 77     * @cfg {Object} tableAttrs
 78     * <p>An object containing properties which are added to the {@link Ext.DomHelper DomHelper} specification
 79     * used to create the layout's <tt>&lt;table&gt;</tt> element. Example:</p><pre><code>
 80{
 81    xtype: 'panel',
 82    layout: 'table',
 83    layoutConfig: {
 84        tableAttrs: {
 85        	style: {
 86        		width: '100%'
 87        	}
 88        },
 89        columns: 3
 90    }
 91}</code></pre>
 92     */
 93    tableAttrs:null,
 94    
 95    // private
 96    setContainer : function(ct){
 97        Ext.layout.TableLayout.superclass.setContainer.call(this, ct);
 98
 99        this.currentRow = 0;
100        this.currentColumn = 0;
101        this.cells = [];
102    },
103
104    // private
105    onLayout : function(ct, target){
106        var cs = ct.items.items, len = cs.length, c, i;
107
108        if(!this.table){
109            target.addClass('x-table-layout-ct');
110
111            this.table = target.createChild(
112                Ext.apply({tag:'table', cls:'x-table-layout', cellspacing: 0, cn: {tag: 'tbody'}}, this.tableAttrs), null, true);
113        }
114        this.renderAll(ct, target);
115    },
116
117    // private
118    getRow : function(index){
119        var row = this.table.tBodies[0].childNodes[index];
120        if(!row){
121            row = document.createElement('tr');
122            this.table.tBodies[0].appendChild(row);
123        }
124        return row;
125    },
126
127    // private
128    getNextCell : function(c){
129        var cell = this.getNextNonSpan(this.currentColumn, this.currentRow);
130        var curCol = this.currentColumn = cell[0], curRow = this.currentRow = cell[1];
131        for(var rowIndex = curRow; rowIndex < curRow + (c.rowspan || 1); rowIndex++){
132            if(!this.cells[rowIndex]){
133                this.cells[rowIndex] = [];
134            }
135            for(var colIndex = curCol; colIndex < curCol + (c.colspan || 1); colIndex++){
136                this.cells[rowIndex][colIndex] = true;
137            }
138        }
139        var td = document.createElement('td');
140        if(c.cellId){
141            td.id = c.cellId;
142        }
143        var cls = 'x-table-layout-cell';
144        if(c.cellCls){
145            cls += ' ' + c.cellCls;
146        }
147        td.className = cls;
148        if(c.colspan){
149            td.colSpan = c.colspan;
150        }
151        if(c.rowspan){
152            td.rowSpan = c.rowspan;
153        }
154        this.getRow(curRow).appendChild(td);
155        return td;
156    },
157    
158    // private
159    getNextNonSpan: function(colIndex, rowIndex){
160        var cols = this.columns;
161        while((cols && colIndex >= cols) || (this.cells[rowIndex] && this.cells[rowIndex][colIndex])) {
162            if(cols && colIndex >= cols){
163                rowIndex++;
164                colIndex = 0;
165            }else{
166                colIndex++;
167            }
168        }
169        return [colIndex, rowIndex];
170    },
171
172    // private
173    renderItem : function(c, position, target){
174        if(c && !c.rendered){
175            c.render(this.getNextCell(c));
176            if(this.extraCls){
177                var t = c.getPositionEl ? c.getPositionEl() : c;
178                t.addClass(this.extraCls);
179            }
180        }
181    },
182
183    // private
184    isValidParent : function(c, target){
185        return true;
186    }
187
188    /**
189     * @property activeItem
190     * @hide
191     */
192});
193
194Ext.Container.LAYOUTS['table'] = Ext.layout.TableLayout;