docs/source/Table.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-layout-container-Table'>/**
  19 </span> * @class Ext.layout.container.Table
  20  * @extends Ext.layout.container.Auto
  21  * &lt;p&gt;This layout allows you to easily render content into an HTML table.  The total number of columns can be
  22  * specified, and rowspan and colspan can be used to create complex layouts within the table.
  23  * This class is intended to be extended or created via the &lt;code&gt;layout: {type: 'table'}&lt;/code&gt;
  24  * {@link Ext.container.Container#layout} config, and should generally not need to be created directly via the new keyword.&lt;/p&gt;
  25  * &lt;p&gt;Note that when creating a layout via config, the layout-specific config properties must be passed in via
  26  * the {@link Ext.container.Container#layout} object which will then be applied internally to the layout.  In the
  27  * case of TableLayout, the only valid layout config properties are {@link #columns} and {@link #tableAttrs}.
  28  * However, the items added to a TableLayout can supply the following table-specific config properties:&lt;/p&gt;
  29  * &lt;ul&gt;
  30  * &lt;li&gt;&lt;b&gt;rowspan&lt;/b&gt; Applied to the table cell containing the item.&lt;/li&gt;
  31  * &lt;li&gt;&lt;b&gt;colspan&lt;/b&gt; Applied to the table cell containing the item.&lt;/li&gt;
  32  * &lt;li&gt;&lt;b&gt;cellId&lt;/b&gt; An id applied to the table cell containing the item.&lt;/li&gt;
  33  * &lt;li&gt;&lt;b&gt;cellCls&lt;/b&gt; A CSS class name added to the table cell containing the item.&lt;/li&gt;
  34  * &lt;/ul&gt;
  35  * &lt;p&gt;The basic concept of building up a TableLayout is conceptually very similar to building up a standard
  36  * HTML table.  You simply add each panel (or &quot;cell&quot;) that you want to include along with any span attributes
  37  * specified as the special config properties of rowspan and colspan which work exactly like their HTML counterparts.
  38  * Rather than explicitly creating and nesting rows and columns as you would in HTML, you simply specify the
  39  * total column count in the layoutConfig and start adding panels in their natural order from left to right,
  40  * top to bottom.  The layout will automatically figure out, based on the column count, rowspans and colspans,
  41  * how to position each panel within the table.  Just like with HTML tables, your rowspans and colspans must add
  42  * up correctly in your overall layout or you'll end up with missing and/or extra cells!  Example usage:&lt;/p&gt;
  43  * {@img Ext.layout.container.Table/Ext.layout.container.Table.png Ext.layout.container.Table container layout}
  44  * &lt;pre&gt;&lt;code&gt;
  45 // This code will generate a layout table that is 3 columns by 2 rows
  46 // with some spanning included.  The basic layout will be:
  47 // +--------+-----------------+
  48 // |   A    |   B             |
  49 // |        |--------+--------|
  50 // |        |   C    |   D    |
  51 // +--------+--------+--------+
  52     Ext.create('Ext.panel.Panel', {
  53         title: 'Table Layout',
  54         width: 300,
  55         height: 150,
  56         layout: {
  57             type: 'table',
  58             // The total column count must be specified here
  59             columns: 3
  60         },
  61         defaults: {
  62             // applied to each contained panel
  63             bodyStyle:'padding:20px'
  64         },
  65         items: [{
  66             html: 'Cell A content',
  67             rowspan: 2
  68         },{
  69             html: 'Cell B content',
  70             colspan: 2
  71         },{
  72             html: 'Cell C content',
  73             cellCls: 'highlight'
  74         },{
  75             html: 'Cell D content'
  76         }],
  77         renderTo: Ext.getBody()
  78     });
  79 &lt;/code&gt;&lt;/pre&gt;
  80  */
  81
  82 Ext.define('Ext.layout.container.Table', {
  83
  84     /* Begin Definitions */
  85
  86     alias: ['layout.table'],
  87     extend: 'Ext.layout.container.Auto',
  88     alternateClassName: 'Ext.layout.TableLayout',
  89
  90     /* End Definitions */
  91
  92 <span id='Ext-layout-container-Table-cfg-columns'>    /**
  93 </span>     * @cfg {Number} columns
  94      * The total number of columns to create in the table for this layout.  If not specified, all Components added to
  95      * this layout will be rendered into a single row using one column per Component.
  96      */
  97
  98     // private
  99     monitorResize:false,
 100
 101     type: 'table',
 102
 103     // Table layout is a self-sizing layout. When an item of for example, a dock layout, the Panel must expand to accommodate
 104     // a table layout. See in particular AbstractDock::onLayout for use of this flag.
 105     autoSize: true,
 106
 107     clearEl: true, // Base class will not create it if already truthy. Not needed in tables.
 108
 109     targetCls: Ext.baseCSSPrefix + 'table-layout-ct',
 110     tableCls: Ext.baseCSSPrefix + 'table-layout',
 111     cellCls: Ext.baseCSSPrefix + 'table-layout-cell',
 112
 113 <span id='Ext-layout-container-Table-cfg-tableAttrs'>    /**
 114 </span>     * @cfg {Object} tableAttrs
 115      * &lt;p&gt;An object containing properties which are added to the {@link Ext.core.DomHelper DomHelper} specification
 116      * used to create the layout's &lt;tt&gt;&amp;lt;table&amp;gt;&lt;/tt&gt; element. Example:&lt;/p&gt;&lt;pre&gt;&lt;code&gt;
 117 {
 118     xtype: 'panel',
 119     layout: {
 120         type: 'table',
 121         columns: 3,
 122         tableAttrs: {
 123             style: {
 124                 width: '100%'
 125             }
 126         }
 127     }
 128 }&lt;/code&gt;&lt;/pre&gt;
 129      */
 130     tableAttrs:null,
 131
 132 <span id='Ext-layout-container-Table-method-renderItems'>    /**
 133 </span>     * @private
 134      * Iterates over all passed items, ensuring they are rendered in a cell in the proper
 135      * location in the table structure.
 136      */
 137     renderItems: function(items) {
 138         var tbody = this.getTable().tBodies[0],
 139             rows = tbody.rows,
 140             i = 0,
 141             len = items.length,
 142             cells, curCell, rowIdx, cellIdx, item, trEl, tdEl, itemCt;
 143
 144         // Calculate the correct cell structure for the current items
 145         cells = this.calculateCells(items);
 146
 147         // Loop over each cell and compare to the current cells in the table, inserting/
 148         // removing/moving cells as needed, and making sure each item is rendered into
 149         // the correct cell.
 150         for (; i &lt; len; i++) {
 151             curCell = cells[i];
 152             rowIdx = curCell.rowIdx;
 153             cellIdx = curCell.cellIdx;
 154             item = items[i];
 155
 156             // If no row present, create and insert one
 157             trEl = rows[rowIdx];
 158             if (!trEl) {
 159                 trEl = tbody.insertRow(rowIdx);
 160             }
 161
 162             // If no cell present, create and insert one
 163             itemCt = tdEl = Ext.get(trEl.cells[cellIdx] || trEl.insertCell(cellIdx));
 164             if (this.needsDivWrap()) { //create wrapper div if needed - see docs below
 165                 itemCt = tdEl.first() || tdEl.createChild({tag: 'div'});
 166                 itemCt.setWidth(null);
 167             }
 168
 169             // Render or move the component into the cell
 170             if (!item.rendered) {
 171                 this.renderItem(item, itemCt, 0);
 172             }
 173             else if (!this.isValidParent(item, itemCt, 0)) {
 174                 this.moveItem(item, itemCt, 0);
 175             }
 176
 177             // Set the cell properties
 178             tdEl.set({
 179                 colSpan: item.colspan || 1,
 180                 rowSpan: item.rowspan || 1,
 181                 id: item.cellId || '',
 182                 cls: this.cellCls + ' ' + (item.cellCls || '')
 183             });
 184
 185             // If at the end of a row, remove any extra cells
 186             if (!cells[i + 1] || cells[i + 1].rowIdx !== rowIdx) {
 187                 cellIdx++;
 188                 while (trEl.cells[cellIdx]) {
 189                     trEl.deleteCell(cellIdx);
 190                 }
 191             }
 192         }
 193
 194         // Delete any extra rows
 195         rowIdx++;
 196         while (tbody.rows[rowIdx]) {
 197             tbody.deleteRow(rowIdx);
 198         }
 199     },
 200
 201     afterLayout: function() {
 202         this.callParent();
 203
 204         if (this.needsDivWrap()) {
 205             // set wrapper div width to match layed out item - see docs below
 206             Ext.Array.forEach(this.getLayoutItems(), function(item) {
 207                 Ext.fly(item.el.dom.parentNode).setWidth(item.getWidth());
 208             });
 209         }
 210     },
 211
 212 <span id='Ext-layout-container-Table-method-calculateCells'>    /**
 213 </span>     * @private
 214      * Determine the row and cell indexes for each component, taking into consideration
 215      * the number of columns and each item's configured colspan/rowspan values.
 216      * @param {Array} items The layout components
 217      * @return {Array} List of row and cell indexes for each of the components
 218      */
 219     calculateCells: function(items) {
 220         var cells = [],
 221             rowIdx = 0,
 222             colIdx = 0,
 223             cellIdx = 0,
 224             totalCols = this.columns || Infinity,
 225             rowspans = [], //rolling list of active rowspans for each column
 226             i = 0, j,
 227             len = items.length,
 228             item;
 229
 230         for (; i &lt; len; i++) {
 231             item = items[i];
 232
 233             // Find the first available row/col slot not taken up by a spanning cell
 234             while (colIdx &gt;= totalCols || rowspans[colIdx] &gt; 0) {
 235                 if (colIdx &gt;= totalCols) {
 236                     // move down to next row
 237                     colIdx = 0;
 238                     cellIdx = 0;
 239                     rowIdx++;
 240
 241                     // decrement all rowspans
 242                     for (j = 0; j &lt; totalCols; j++) {
 243                         if (rowspans[j] &gt; 0) {
 244                             rowspans[j]--;
 245                         }
 246                     }
 247                 } else {
 248                     colIdx++;
 249                 }
 250             }
 251
 252             // Add the cell info to the list
 253             cells.push({
 254                 rowIdx: rowIdx,
 255                 cellIdx: cellIdx
 256             });
 257
 258             // Increment
 259             rowspans[colIdx] = item.rowspan || 1;
 260             colIdx += item.colspan || 1;
 261             cellIdx++;
 262         }
 263
 264         return cells;
 265     },
 266
 267 <span id='Ext-layout-container-Table-method-getTable'>    /**
 268 </span>     * @private
 269      * Return the layout's table element, creating it if necessary.
 270      */
 271     getTable: function() {
 272         var table = this.table;
 273         if (!table) {
 274             table = this.table = this.getTarget().createChild(
 275                 Ext.apply({
 276                     tag: 'table',
 277                     role: 'presentation',
 278                     cls: this.tableCls,
 279                     cellspacing: 0, //TODO should this be specified or should CSS handle it?
 280                     cn: {tag: 'tbody'}
 281                 }, this.tableAttrs),
 282                 null, true
 283             );
 284         }
 285         return table;
 286     },
 287
 288 <span id='Ext-layout-container-Table-method-needsDivWrap'>    /**
 289 </span>     * @private
 290      * Opera 10.5 has a bug where if a table cell's child has box-sizing:border-box and padding, it
 291      * will include that padding in the size of the cell, making it always larger than the
 292      * shrink-wrapped size of its contents. To get around this we have to wrap the contents in a div
 293      * and then set that div's width to match the item rendered within it afterLayout. This method
 294      * determines whether we need the wrapper div; it currently does a straight UA sniff as this bug
 295      * seems isolated to just Opera 10.5, but feature detection could be added here if needed.
 296      */
 297     needsDivWrap: function() {
 298         return Ext.isOpera10_5;
 299     }
 300 });</pre>
 301 </body>
 302 </html>