/**
- * @class Ext.layout.container.Table
- * @extends Ext.layout.container.Auto
- * <p>This layout allows you to easily render content into an HTML table. The total number of columns can be
- * specified, and rowspan and colspan can be used to create complex layouts within the table.
- * This class is intended to be extended or created via the <code>layout: {type: 'table'}</code>
- * {@link Ext.container.Container#layout} config, and should generally not need to be created directly via the new keyword.</p>
- * <p>Note that when creating a layout via config, the layout-specific config properties must be passed in via
- * the {@link Ext.container.Container#layout} object which will then be applied internally to the layout. In the
- * case of TableLayout, the only valid layout config properties are {@link #columns} and {@link #tableAttrs}.
- * However, the items added to a TableLayout can supply the following table-specific config properties:</p>
- * <ul>
- * <li><b>rowspan</b> Applied to the table cell containing the item.</li>
- * <li><b>colspan</b> Applied to the table cell containing the item.</li>
- * <li><b>cellId</b> An id applied to the table cell containing the item.</li>
- * <li><b>cellCls</b> A CSS class name added to the table cell containing the item.</li>
- * </ul>
- * <p>The basic concept of building up a TableLayout is conceptually very similar to building up a standard
- * HTML table. You simply add each panel (or "cell") that you want to include along with any span attributes
- * specified as the special config properties of rowspan and colspan which work exactly like their HTML counterparts.
- * Rather than explicitly creating and nesting rows and columns as you would in HTML, you simply specify the
- * total column count in the layoutConfig and start adding panels in their natural order from left to right,
- * top to bottom. The layout will automatically figure out, based on the column count, rowspans and colspans,
- * how to position each panel within the table. Just like with HTML tables, your rowspans and colspans must add
- * up correctly in your overall layout or you'll end up with missing and/or extra cells! Example usage:</p>
- * {@img Ext.layout.container.Table/Ext.layout.container.Table.png Ext.layout.container.Table container layout}
- * <pre><code>
-// This code will generate a layout table that is 3 columns by 2 rows
-// with some spanning included. The basic layout will be:
-// +--------+-----------------+
-// | A | B |
-// | |--------+--------|
-// | | C | D |
-// +--------+--------+--------+
- Ext.create('Ext.panel.Panel', {
- title: 'Table Layout',
- width: 300,
- height: 150,
- layout: {
- type: 'table',
- // The total column count must be specified here
- columns: 3
- },
- defaults: {
- // applied to each contained panel
- bodyStyle:'padding:20px'
- },
- items: [{
- html: 'Cell A content',
- rowspan: 2
- },{
- html: 'Cell B content',
- colspan: 2
- },{
- html: 'Cell C content',
- cellCls: 'highlight'
- },{
- html: 'Cell D content'
- }],
- renderTo: Ext.getBody()
- });
-</code></pre>
+
+
+
+
+ The source code
+
+
+
+
+
+
+
/**
+ * This layout allows you to easily render content into an HTML table. The total number of columns can be specified, and
+ * rowspan and colspan can be used to create complex layouts within the table. This class is intended to be extended or
+ * created via the `layout: {type: 'table'}` {@link Ext.container.Container#layout} config, and should generally not
+ * need to be created directly via the new keyword.
+ *
+ * Note that when creating a layout via config, the layout-specific config properties must be passed in via the {@link
+ * Ext.container.Container#layout} object which will then be applied internally to the layout. In the case of
+ * TableLayout, the only valid layout config properties are {@link #columns} and {@link #tableAttrs}. However, the items
+ * added to a TableLayout can supply the following table-specific config properties:
+ *
+ * - **rowspan** Applied to the table cell containing the item.
+ * - **colspan** Applied to the table cell containing the item.
+ * - **cellId** An id applied to the table cell containing the item.
+ * - **cellCls** A CSS class name added to the table cell containing the item.
+ *
+ * The basic concept of building up a TableLayout is conceptually very similar to building up a standard HTML table. You
+ * simply add each panel (or "cell") that you want to include along with any span attributes specified as the special
+ * config properties of rowspan and colspan which work exactly like their HTML counterparts. Rather than explicitly
+ * creating and nesting rows and columns as you would in HTML, you simply specify the total column count in the
+ * layoutConfig and start adding panels in their natural order from left to right, top to bottom. The layout will
+ * automatically figure out, based on the column count, rowspans and colspans, how to position each panel within the
+ * table. Just like with HTML tables, your rowspans and colspans must add up correctly in your overall layout or you'll
+ * end up with missing and/or extra cells! Example usage:
+ *
+ * @example
+ * Ext.create('Ext.panel.Panel', {
+ * title: 'Table Layout',
+ * width: 300,
+ * height: 150,
+ * layout: {
+ * type: 'table',
+ * // The total column count must be specified here
+ * columns: 3
+ * },
+ * defaults: {
+ * // applied to each contained panel
+ * bodyStyle: 'padding:20px'
+ * },
+ * items: [{
+ * html: 'Cell A content',
+ * rowspan: 2
+ * },{
+ * html: 'Cell B content',
+ * colspan: 2
+ * },{
+ * html: 'Cell C content',
+ * cellCls: 'highlight'
+ * },{
+ * html: 'Cell D content'
+ * }],
+ * renderTo: Ext.getBody()
+ * });
*/
-
Ext.define('Ext.layout.container.Table', {
/* Begin Definitions */
@@ -72,9 +79,9 @@ Ext.define('Ext.layout.container.Table', {
/* End Definitions */
- /**
+ /**
* @cfg {Number} columns
- * The total number of columns to create in the table for this layout. If not specified, all Components added to
+ * The total number of columns to create in the table for this layout. If not specified, all Components added to
* this layout will be rendered into a single row using one column per Component.
*/
@@ -93,26 +100,39 @@ Ext.define('Ext.layout.container.Table', {
tableCls: Ext.baseCSSPrefix + 'table-layout',
cellCls: Ext.baseCSSPrefix + 'table-layout-cell',
- /**
+ /**
* @cfg {Object} tableAttrs
- * <p>An object containing properties which are added to the {@link Ext.core.DomHelper DomHelper} specification
- * used to create the layout's <tt><table></tt> element. Example:</p><pre><code>
-{
- xtype: 'panel',
- layout: {
- type: 'table',
- columns: 3,
- tableAttrs: {
- style: {
- width: '100%'
- }
- }
- }
-}</code></pre>
+ * An object containing properties which are added to the {@link Ext.DomHelper DomHelper} specification used to
+ * create the layout's `<table>` element. Example:
+ *
+ * {
+ * xtype: 'panel',
+ * layout: {
+ * type: 'table',
+ * columns: 3,
+ * tableAttrs: {
+ * style: {
+ * width: '100%'
+ * }
+ * }
+ * }
+ * }
*/
tableAttrs:null,
- /**
+ /**
+ * @cfg {Object} trAttrs
+ * An object containing properties which are added to the {@link Ext.DomHelper DomHelper} specification used to
+ * create the layout's <tr> elements.
+ */
+
+ /**
+ * @cfg {Object} tdAttrs
+ * An object containing properties which are added to the {@link Ext.DomHelper DomHelper} specification used to
+ * create the layout's <td> elements.
+ */
+
+ /**
* @private
* Iterates over all passed items, ensuring they are rendered in a cell in the proper
* location in the table structure.
@@ -140,6 +160,9 @@ Ext.define('Ext.layout.container.Table', {
trEl = rows[rowIdx];
if (!trEl) {
trEl = tbody.insertRow(rowIdx);
+ if (this.trAttrs) {
+ trEl.set(this.trAttrs);
+ }
}
// If no cell present, create and insert one
@@ -158,6 +181,9 @@ Ext.define('Ext.layout.container.Table', {
}
// Set the cell properties
+ if (this.tdAttrs) {
+ tdEl.set(this.tdAttrs);
+ }
tdEl.set({
colSpan: item.colspan || 1,
rowSpan: item.rowspan || 1,
@@ -192,12 +218,12 @@ Ext.define('Ext.layout.container.Table', {
}
},
- /**
+ /**
* @private
* Determine the row and cell indexes for each component, taking into consideration
* the number of columns and each item's configured colspan/rowspan values.
* @param {Array} items The layout components
- * @return {Array} List of row and cell indexes for each of the components
+ * @return {Object[]} List of row and cell indexes for each of the components
*/
calculateCells: function(items) {
var cells = [],
@@ -239,15 +265,17 @@ Ext.define('Ext.layout.container.Table', {
});
// Increment
- rowspans[colIdx] = item.rowspan || 1;
- colIdx += item.colspan || 1;
- cellIdx++;
+ for (j = item.colspan || 1; j; --j) {
+ rowspans[colIdx] = item.rowspan || 1;
+ ++colIdx;
+ }
+ ++cellIdx;
}
return cells;
},
- /**
+ /**
* @private
* Return the layout's table element, creating it if necessary.
*/
@@ -268,7 +296,7 @@ Ext.define('Ext.layout.container.Table', {
return table;
},
- /**
+ /**
* @private
* Opera 10.5 has a bug where if a table cell's child has box-sizing:border-box and padding, it
* will include that padding in the size of the cell, making it always larger than the
@@ -280,4 +308,6 @@ Ext.define('Ext.layout.container.Table', {
needsDivWrap: function() {
return Ext.isOpera10_5;
}
-});