docs/source/TableLayout.html

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