Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / 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>