X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/2e847cf21b8ab9d15fa167b315ca5b2fa92638fc..6746dc89c47ed01b165cc1152533605f97eb8e8d:/docs/source/Column.html diff --git a/docs/source/Column.html b/docs/source/Column.html index 0bab9bf1..ec759436 100644 --- a/docs/source/Column.html +++ b/docs/source/Column.html @@ -1,432 +1,214 @@ - - - - The source code - - - - - 
/**
- * @class Ext.grid.Column
- * 
This class encapsulates column configuration data to be used in the initialization of a
- * {@link Ext.grid.ColumnModel ColumnModel}.

- * 
While subclasses are provided to render data in different ways, this class renders a passed
- * data field unchanged and is usually used for textual columns.

- */
-Ext.grid.Column = Ext.extend(Object, {
-    
/**
-     * @cfg {Boolean} editable Optional. Defaults to true, enabling the configured
-     * {@link #editor}.  Set to false to initially disable editing on this column.
-     * The initial configuration may be dynamically altered using
-     * {@link Ext.grid.ColumnModel}.{@link Ext.grid.ColumnModel#setEditable setEditable()}.
-     */
-    
/**
-     * @cfg {String} id Optional. A name which identifies this column (defaults to the column's initial
-     * ordinal position.) The id is used to create a CSS class name which is applied to all
-     * table cells (including headers) in that column (in this context the id does not need to be
-     * unique). The class name takes the form of 
x-grid3-td-id

-     * Header cells will also receive this class name, but will also have the class 
x-grid3-hd

-     * So, to target header cells, use CSS selectors such as:
.x-grid3-hd-row .x-grid3-td-id

-     * The {@link Ext.grid.GridPanel#autoExpandColumn} grid config option references the column via this
-     * unique identifier.
-     */
-    
/**
-     * @cfg {String} header Optional. The header text to be used as innerHTML
-     * (html tags are accepted) to display in the Grid view.  Note: to
-     * have a clickable header with no text displayed use ' '.
-     */
-    
/**
-     * @cfg {Boolean} groupable Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
-     * may be used to disable the header menu item to group by the column selected. Defaults to true,
-     * which enables the header menu group option.  Set to false to disable (but still show) the
-     * group option in the header menu for the column. See also {@link #groupName}.
-     */
-    
/**
-     * @cfg {String} groupName Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
-     * may be used to specify the text with which to prefix the group field value in the group header line.
-     * See also {@link #groupRenderer} and
-     * {@link Ext.grid.GroupingView}.{@link Ext.grid.GroupingView#showGroupName showGroupName}.
-     */
-    
/**
-     * @cfg {Function} groupRenderer 
Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
-     * may be used to specify the function used to format the grouping field value for display in the group
-     * {@link #groupName header}.  If a groupRenderer is not specified, the configured
-     * {@link #renderer} will be called; if a {@link #renderer} is also not specified
-     * the new value of the group field will be used.

-     * 
The called function (either the groupRenderer or {@link #renderer}) will be
-     * passed the following parameters:
-     * 

-     * 
The function should return a string value.

-     */
-    
/**
-     * @cfg {String} emptyGroupText Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
-     * may be used to specify the text to display when there is an empty group value. Defaults to the
-     * {@link Ext.grid.GroupingView}.{@link Ext.grid.GroupingView#emptyGroupText emptyGroupText}.
-     */
-    
/**
-     * @cfg {String} dataIndex 
Required. The name of the field in the
-     * grid's {@link Ext.data.Store}'s {@link Ext.data.Record} definition from
-     * which to draw the column's value.

-     */
-    
/**
-     * @cfg {Number} width
-     * Optional. The initial width in pixels of the column.
-     * The width of each column can also be affected if any of the following are configured:
-     *
- - \ No newline at end of file + + + + + The source code + + + + + + + 
/**
+ * @class Ext.layout.container.Column
+ * @extends Ext.layout.container.Auto
+ * <p>This is the layout style of choice for creating structural layouts in a multi-column format where the width of
+ * each column can be specified as a percentage or fixed width, but the height is allowed to vary based on the content.
+ * This class is intended to be extended or created via the layout:'column' {@link Ext.container.Container#layout} config,
+ * and should generally not need to be created directly via the new keyword.</p>
+ * <p>ColumnLayout does not have any direct config options (other than inherited ones), but it does support a
+ * specific config property of <b><tt>columnWidth</tt></b> that can be included in the config of any panel added to it.  The
+ * layout will use the columnWidth (if present) or width of each panel during layout to determine how to size each panel.
+ * If width or columnWidth is not specified for a given panel, its width will default to the panel's width (or auto).</p>
+ * <p>The width property is always evaluated as pixels, and must be a number greater than or equal to 1.
+ * The columnWidth property is always evaluated as a percentage, and must be a decimal value greater than 0 and
+ * less than 1 (e.g., .25).</p>
+ * <p>The basic rules for specifying column widths are pretty simple.  The logic makes two passes through the
+ * set of contained panels.  During the first layout pass, all panels that either have a fixed width or none
+ * specified (auto) are skipped, but their widths are subtracted from the overall container width.  During the second
+ * pass, all panels with columnWidths are assigned pixel widths in proportion to their percentages based on
+ * the total <b>remaining</b> container width.  In other words, percentage width panels are designed to fill the space
+ * left over by all the fixed-width and/or auto-width panels.  Because of this, while you can specify any number of columns
+ * with different percentages, the columnWidths must always add up to 1 (or 100%) when added together, otherwise your
+ * layout may not render as expected.  
+ * {@img Ext.layout.container.Column/Ext.layout.container.Column1.png Ext.layout.container.Column container layout}
+ * Example usage:</p>
+ * <pre><code>
+    // All columns are percentages -- they must add up to 1
+    Ext.create('Ext.panel.Panel', {
+        title: 'Column Layout - Percentage Only',
+        width: 350,
+        height: 250,
+        layout:'column',
+        items: [{
+            title: 'Column 1',
+            columnWidth: .25
+        },{
+            title: 'Column 2',
+            columnWidth: .55
+        },{
+            title: 'Column 3',
+            columnWidth: .20
+        }],
+        renderTo: Ext.getBody()
+    }); 
+
+// {@img Ext.layout.container.Column/Ext.layout.container.Column2.png Ext.layout.container.Column container layout}
+// Mix of width and columnWidth -- all columnWidth values must add up
+// to 1. The first column will take up exactly 120px, and the last two
+// columns will fill the remaining container width.
+
+    Ext.create('Ext.Panel', {
+        title: 'Column Layout - Mixed',
+        width: 350,
+        height: 250,
+        layout:'column',
+        items: [{
+            title: 'Column 1',
+            width: 120
+        },{
+            title: 'Column 2',
+            columnWidth: .7
+        },{
+            title: 'Column 3',
+            columnWidth: .3
+        }],
+        renderTo: Ext.getBody()
+    }); 
+</code></pre>
+ */
+Ext.define('Ext.layout.container.Column', {
+
+    extend: 'Ext.layout.container.Auto',
+    alias: ['layout.column'],
+    alternateClassName: 'Ext.layout.ColumnLayout',
+
+    type: 'column',
+
+    itemCls: Ext.baseCSSPrefix + 'column',
+
+    targetCls: Ext.baseCSSPrefix + 'column-layout-ct',
+
+    scrollOffset: 0,
+
+    bindToOwnerCtComponent: false,
+
+    getRenderTarget : function() {
+        if (!this.innerCt) {
+
+            // the innerCt prevents wrapping and shuffling while
+            // the container is resizing
+            this.innerCt = this.getTarget().createChild({
+                cls: Ext.baseCSSPrefix + 'column-inner'
+            });
+
+            // Column layout uses natural HTML flow to arrange the child items.
+            // To ensure that all browsers (I'm looking at you IE!) add the bottom margin of the last child to the
+            // containing element height, we create a zero-sized element with style clear:both to force a "new line"
+            this.clearEl = this.innerCt.createChild({
+                cls: Ext.baseCSSPrefix + 'clear',
+                role: 'presentation'
+            });
+        }
+        return this.innerCt;
+    },
+
+    // private
+    onLayout : function() {
+        var me = this,
+            target = me.getTarget(),
+            items = me.getLayoutItems(),
+            len = items.length,
+            item,
+            i,
+            parallelMargins = [],
+            itemParallelMargins,
+            size,
+            availableWidth,
+            columnWidth;
+
+        size = me.getLayoutTargetSize();
+        if (size.width < len * 10) { // Don't lay out in impossibly small target (probably display:none, or initial, unsized Container)
+            return;
+        }
+
+        // On the first pass, for all except IE6-7, we lay out the items with no scrollbars visible using style overflow: hidden.
+        // If, after the layout, it is detected that there is vertical overflow,
+        // we will recurse back through here. Do not adjust overflow style at that time.
+        if (me.adjustmentPass) {
+            if (Ext.isIE6 || Ext.isIE7 || Ext.isIEQuirks) {
+                size.width = me.adjustedWidth;
+            }
+        } else {
+            i = target.getStyle('overflow');
+            if (i && i != 'hidden') {
+                me.autoScroll = true;
+                if (!(Ext.isIE6 || Ext.isIE7 || Ext.isIEQuirks)) {
+                    target.setStyle('overflow', 'hidden');
+                    size = me.getLayoutTargetSize();
+                }
+            }
+        }
+
+        availableWidth = size.width - me.scrollOffset;
+        me.innerCt.setWidth(availableWidth);
+
+        // some columns can be percentages while others are fixed
+        // so we need to make 2 passes
+        for (i = 0; i < len; i++) {
+            item = items[i];
+            itemParallelMargins = parallelMargins[i] = item.getEl().getMargin('lr');
+            if (!item.columnWidth) {
+                availableWidth -= (item.getWidth() + itemParallelMargins);
+            }
+        }
+
+        availableWidth = availableWidth < 0 ? 0 : availableWidth;
+        for (i = 0; i < len; i++) {
+            item = items[i];
+            if (item.columnWidth) {
+                columnWidth = Math.floor(item.columnWidth * availableWidth) - parallelMargins[i];
+                if (item.getWidth() != columnWidth) {
+                    me.setItemSize(item, columnWidth, item.height);
+                }
+            }
+        }
+
+        // After the first pass on an autoScroll layout, restore the overflow settings if it had been changed (only changed for non-IE6)
+        if (!me.adjustmentPass && me.autoScroll) {
+
+            // If there's a vertical overflow, relay with scrollbars
+            target.setStyle('overflow', 'auto');
+            me.adjustmentPass = (target.dom.scrollHeight > size.height);
+            if (Ext.isIE6 || Ext.isIE7 || Ext.isIEQuirks) {
+                me.adjustedWidth = size.width - Ext.getScrollBarWidth();
+            } else {
+                target.setStyle('overflow', 'auto');
+            }
+
+            // If the layout caused height overflow, recurse back and recalculate (with overflow setting restored on non-IE6)
+            if (me.adjustmentPass) {
+                me.onLayout();
+            }
+        }
+        delete me.adjustmentPass;
+    },
+
+    configureItem: function(item) {
+        if (item.columnWidth) {
+            item.layoutManagedWidth = 1;
+        } else {
+            item.layoutManagedWidth = 2;
+        }
+        item.layoutManagedHeight = 2;
+        this.callParent(arguments);
+    }
+});
+ +