docs/source/TableLayout.html

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