X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/7a654f8d43fdb43d78b63d90528bed6e86b608cc..refs/heads/master:/docs/source/Table.html diff --git a/docs/source/Table.html b/docs/source/Table.html index a611ea7a..9f5068d8 100644 --- a/docs/source/Table.html +++ b/docs/source/Table.html @@ -1,67 +1,74 @@ -Sencha Documentation Project
/**
- * @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>&lt;table&gt;</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;
     }
-});
\ No newline at end of file +});
+ +