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