source/widgets/layout/TableLayout.js

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