X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/docs/source/Table.html diff --git a/docs/source/Table.html b/docs/source/Table.html index 0fb385ff..a611ea7a 100644 --- a/docs/source/Table.html +++ b/docs/source/Table.html @@ -1,95 +1,283 @@ - - - The source code - - - - -
Ext.sql.Table = function(conn, name, keyName){
-	this.conn = conn;
-	this.name = name;
-	this.keyName = keyName;
-};
-
-Ext.sql.Table.prototype = {
-	update : function(o){
-		var clause = this.keyName + " = ?";
-		return this.updateBy(o, clause, [o[this.keyName]]);
-	},
-
-	updateBy : function(o, clause, args){
-		var sql = "UPDATE " + this.name + " set ";
-		var fs = [], a = [];
-		for(var key in o){
-			if(o.hasOwnProperty(key)){
-				fs[fs.length] = key + ' = ?';
-				a[a.length] = o[key];
-			}
-		}
-		for(var key in args){
-			if(args.hasOwnProperty(key)){
-				a[a.length] = args[key];
-			}
-		}
-		sql = [sql, fs.join(','), ' WHERE ', clause].join('');
-		return this.conn.execBy(sql, a);
-	},
-
-	insert : function(o){
-		var sql = "INSERT into " + this.name + " ";
-		var fs = [], vs = [], a = [];
-		for(var key in o){
-			if(o.hasOwnProperty(key)){
-				fs[fs.length] = key;
-				vs[vs.length] = '?';
-				a[a.length] = o[key];
-			}
-		}
-		sql = [sql, '(', fs.join(','), ') VALUES (', vs.join(','), ')'].join('');
-        return this.conn.execBy(sql, a);
-    },
-
-	lookup : function(id){
-		return this.selectBy('where ' + this.keyName + " = ?", [id])[0] || null;
-	},
-
-	exists : function(id){
-		return !!this.lookup(id);
-	},
-
-	save : function(o){
-		if(this.exists(o[this.keyName])){
-            this.update(o);
-        }else{
-            this.insert(o);
-        }
-	},
-
-	select : function(clause){
-		return this.selectBy(clause, null);
-	},
-
-	selectBy : function(clause, args){
-		var sql = "select * from " + this.name;
-		if(clause){
-			sql += ' ' + clause;
-		}
-		args = args || {};
-		return this.conn.queryBy(sql, args);
-	},
-
-	remove : function(clause){
-		this.deleteBy(clause, null);
-	},
-
-	removeBy : function(clause, args){
-		var sql = "delete from " + this.name;
-		if(clause){
-			sql += ' where ' + clause;
-		}
-		args = args || {};
-		this.conn.execBy(sql, args);
-	}
-};
- - \ No newline at end of file +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>
+ */
+
+Ext.define('Ext.layout.container.Table', {
+
+    /* Begin Definitions */
+
+    alias: ['layout.table'],
+    extend: 'Ext.layout.container.Auto',
+    alternateClassName: 'Ext.layout.TableLayout',
+
+    /* 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
+     * this layout will be rendered into a single row using one column per Component.
+     */
+
+    // private
+    monitorResize:false,
+
+    type: 'table',
+
+    // Table layout is a self-sizing layout. When an item of for example, a dock layout, the Panel must expand to accommodate
+    // a table layout. See in particular AbstractDock::onLayout for use of this flag.
+    autoSize: true,
+
+    clearEl: true, // Base class will not create it if already truthy. Not needed in tables.
+
+    targetCls: Ext.baseCSSPrefix + 'table-layout-ct',
+    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>
+     */
+    tableAttrs:null,
+
+    /**
+     * @private
+     * Iterates over all passed items, ensuring they are rendered in a cell in the proper
+     * location in the table structure.
+     */
+    renderItems: function(items) {
+        var tbody = this.getTable().tBodies[0],
+            rows = tbody.rows,
+            i = 0,
+            len = items.length,
+            cells, curCell, rowIdx, cellIdx, item, trEl, tdEl, itemCt;
+
+        // Calculate the correct cell structure for the current items
+        cells = this.calculateCells(items);
+
+        // Loop over each cell and compare to the current cells in the table, inserting/
+        // removing/moving cells as needed, and making sure each item is rendered into
+        // the correct cell.
+        for (; i < len; i++) {
+            curCell = cells[i];
+            rowIdx = curCell.rowIdx;
+            cellIdx = curCell.cellIdx;
+            item = items[i];
+
+            // If no row present, create and insert one
+            trEl = rows[rowIdx];
+            if (!trEl) {
+                trEl = tbody.insertRow(rowIdx);
+            }
+
+            // If no cell present, create and insert one
+            itemCt = tdEl = Ext.get(trEl.cells[cellIdx] || trEl.insertCell(cellIdx));
+            if (this.needsDivWrap()) { //create wrapper div if needed - see docs below
+                itemCt = tdEl.first() || tdEl.createChild({tag: 'div'});
+                itemCt.setWidth(null);
+            }
+
+            // Render or move the component into the cell
+            if (!item.rendered) {
+                this.renderItem(item, itemCt, 0);
+            }
+            else if (!this.isValidParent(item, itemCt, 0)) {
+                this.moveItem(item, itemCt, 0);
+            }
+
+            // Set the cell properties
+            tdEl.set({
+                colSpan: item.colspan || 1,
+                rowSpan: item.rowspan || 1,
+                id: item.cellId || '',
+                cls: this.cellCls + ' ' + (item.cellCls || '')
+            });
+
+            // If at the end of a row, remove any extra cells
+            if (!cells[i + 1] || cells[i + 1].rowIdx !== rowIdx) {
+                cellIdx++;
+                while (trEl.cells[cellIdx]) {
+                    trEl.deleteCell(cellIdx);
+                }
+            }
+        }
+
+        // Delete any extra rows
+        rowIdx++;
+        while (tbody.rows[rowIdx]) {
+            tbody.deleteRow(rowIdx);
+        }
+    },
+
+    afterLayout: function() {
+        this.callParent();
+
+        if (this.needsDivWrap()) {
+            // set wrapper div width to match layed out item - see docs below
+            Ext.Array.forEach(this.getLayoutItems(), function(item) {
+                Ext.fly(item.el.dom.parentNode).setWidth(item.getWidth());
+            });
+        }
+    },
+
+    /**
+     * @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
+     */
+    calculateCells: function(items) {
+        var cells = [],
+            rowIdx = 0,
+            colIdx = 0,
+            cellIdx = 0,
+            totalCols = this.columns || Infinity,
+            rowspans = [], //rolling list of active rowspans for each column
+            i = 0, j,
+            len = items.length,
+            item;
+
+        for (; i < len; i++) {
+            item = items[i];
+
+            // Find the first available row/col slot not taken up by a spanning cell
+            while (colIdx >= totalCols || rowspans[colIdx] > 0) {
+                if (colIdx >= totalCols) {
+                    // move down to next row
+                    colIdx = 0;
+                    cellIdx = 0;
+                    rowIdx++;
+
+                    // decrement all rowspans
+                    for (j = 0; j < totalCols; j++) {
+                        if (rowspans[j] > 0) {
+                            rowspans[j]--;
+                        }
+                    }
+                } else {
+                    colIdx++;
+                }
+            }
+
+            // Add the cell info to the list
+            cells.push({
+                rowIdx: rowIdx,
+                cellIdx: cellIdx
+            });
+
+            // Increment
+            rowspans[colIdx] = item.rowspan || 1;
+            colIdx += item.colspan || 1;
+            cellIdx++;
+        }
+
+        return cells;
+    },
+
+    /**
+     * @private
+     * Return the layout's table element, creating it if necessary.
+     */
+    getTable: function() {
+        var table = this.table;
+        if (!table) {
+            table = this.table = this.getTarget().createChild(
+                Ext.apply({
+                    tag: 'table',
+                    role: 'presentation',
+                    cls: this.tableCls,
+                    cellspacing: 0, //TODO should this be specified or should CSS handle it?
+                    cn: {tag: 'tbody'}
+                }, this.tableAttrs),
+                null, true
+            );
+        }
+        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
+     * shrink-wrapped size of its contents. To get around this we have to wrap the contents in a div
+     * and then set that div's width to match the item rendered within it afterLayout. This method
+     * determines whether we need the wrapper div; it currently does a straight UA sniff as this bug
+     * seems isolated to just Opera 10.5, but feature detection could be added here if needed.
+     */
+    needsDivWrap: function() {
+        return Ext.isOpera10_5;
+    }
+});
\ No newline at end of file