X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..6746dc89c47ed01b165cc1152533605f97eb8e8d:/docs/source/Column.html diff --git a/docs/source/Column.html b/docs/source/Column.html index b3632cf7..ec759436 100644 --- a/docs/source/Column.html +++ b/docs/source/Column.html @@ -1,684 +1,214 @@ +
- +/*! - * Ext JS Library 3.3.1 - * Copyright(c) 2006-2010 Sencha Inc. - * licensing@sencha.com - * http://www.sencha.com/license - */ -/** - * @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.
+ +/** + * @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.grid.Column = Ext.extend(Ext.util.Observable, { - /** - * @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 ofx-grid3-td-id- * Header cells will also receive this class name, but will also have the classx-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} groupRendererOptional. 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: - *
- *- *
- v : Object
- *The new value of the group field.
- unused : undefined
- *Unused parameter.
- r : Ext.data.Record
- *The Record providing the data - * for the row which caused group change.
- rowIndex : Number
- *The row index of the Record which caused group change.
- colIndex : Number
- *The column index of the group field.
- ds : Ext.data.Store
- *The Store which is providing the data Model.
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} dataIndexRequired. 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: - *- *
- {@link Ext.grid.GridPanel}.{@link Ext.grid.GridPanel#autoExpandColumn autoExpandColumn}
- *- {@link Ext.grid.GridView}.{@link Ext.grid.GridView#forceFit forceFit} - *
- *- *By specifying forceFit:true, {@link #fixed non-fixed width} columns will be - * re-proportioned (based on the relative initial widths) to fill the width of the grid so - * that no horizontal scrollbar is shown.
- *- {@link Ext.grid.GridView}.{@link Ext.grid.GridView#autoFill autoFill}
- *- {@link Ext.grid.GridPanel}.{@link Ext.grid.GridPanel#minColumnWidth minColumnWidth}
- *Note: when the width of each column is determined, a space on the right side - * is reserved for the vertical scrollbar. The - * {@link Ext.grid.GridView}.{@link Ext.grid.GridView#scrollOffset scrollOffset} - * can be modified to reduce or eliminate the reserved offset.
- */ - /** - * @cfg {Boolean} sortable Optional. true if sorting is to be allowed on this column. - * Defaults to the value of the{@link Ext.grid.ColumnModel#defaultSortable}
property. - * Whether local/remote sorting is used is specified in{@link Ext.data.Store#remoteSort}
. - */ - /** - * @cfg {Boolean} fixed Optional. true if the column width cannot be changed. Defaults to false. - */ - /** - * @cfg {Boolean} resizable Optional. false to disable column resizing. Defaults to true. - */ - /** - * @cfg {Boolean} menuDisabled Optional. true to disable the column menu. Defaults to false. - */ - /** - * @cfg {Boolean} hidden - * Optional. true to initially hide this column. Defaults to false. - * A hidden column {@link Ext.grid.GridPanel#enableColumnHide may be shown via the header row menu}. - * If a column is never to be shown, simply do not include this column in the Column Model at all. - */ - /** - * @cfg {String} tooltip Optional. A text string to use as the column header's tooltip. If Quicktips - * are enabled, this value will be used as the text of the quick tip, otherwise it will be set as the - * header's HTML title attribute. Defaults to ''. - */ - /** - * @cfg {Mixed} renderer - *For an alternative to specifying a renderer see
- *{@link #xtype}
Optional. A renderer is an 'interceptor' method which can be used transform data (value, - * appearance, etc.) before it is rendered). This may be specified in either of three ways: - *
- * If not specified, the default renderer uses the raw data value. - *- *
- A renderer function used to return HTML markup for a cell given the cell's data value.
- *- A string which references a property name of the {@link Ext.util.Format} class which - * provides a renderer function.
- *- An object specifying both the renderer function, and its execution scope (this - * reference) e.g.:
-{ - fn: this.gridRenderer, - scope: this -} -
For information about the renderer function (passed parameters, etc.), see - * {@link Ext.grid.ColumnModel#setRenderer}. An example of specifying renderer function inline:
- * See also {@link #scope}. - */ - /** - * @cfg {String} xtype Optional. A String which references a predefined {@link Ext.grid.Column} subclass - * type which is preconfigured with an appropriate-var companyColumn = { - header: 'Company Name', - dataIndex: 'company', - renderer: function(value, metaData, record, rowIndex, colIndex, store) { - // provide the logic depending on business rules - // name of your own choosing to manipulate the cell depending upon - // the data in the underlying Record object. - if (value == 'whatever') { - //metaData.css : String : A CSS class name to add to the TD element of the cell. - //metaData.attr : String : An html attribute definition string to apply to - // the data container element within the table - // cell (e.g. 'style="color:red;"'). - metaData.css = 'name-of-css-class-you-will-define'; - } - return value; - } -} - *
{@link #renderer}
to be easily - * configured into a ColumnModel. The predefined {@link Ext.grid.Column} subclass types are: - *- *- *
- gridcolumn : {@link Ext.grid.Column} (Default)
- *- booleancolumn : {@link Ext.grid.BooleanColumn}
- *- numbercolumn : {@link Ext.grid.NumberColumn}
- *- datecolumn : {@link Ext.grid.DateColumn}
- *- templatecolumn : {@link Ext.grid.TemplateColumn}
- *Configuration properties for the specified
- *xtype
may be specified with - * the Column configuration properties, for example:- */ - /** - * @cfg {Object} scope Optional. The scope (this reference) in which to execute the - * renderer. Defaults to the Column configuration object. - */ - /** - * @cfg {String} align Optional. Set the CSS text-align property of the column. Defaults to undefined. - */ - /** - * @cfg {String} css Optional. An inline style definition string which is applied to all table cells in the column - * (excluding headers). Defaults to undefined. - */ - /** - * @cfg {Boolean} hideable Optional. Specify as false to prevent the user from hiding this column - * (defaults to true). To disallow column hiding globally for all columns in the grid, use - * {@link Ext.grid.GridPanel#enableColumnHide} instead. - */ - /** - * @cfg {Ext.form.Field} editor Optional. The {@link Ext.form.Field} to use when editing values in this column - * if editing is supported by the grid. See {@link #editable} also. - */ +Ext.define('Ext.layout.container.Column', { - /** - * @private - * @cfg {Boolean} isColumn - * Used by ColumnModel setConfig method to avoid reprocessing a Column - * if-var grid = new Ext.grid.GridPanel({ - ... - columns: [{ - header: 'Last Updated', - dataIndex: 'lastChange', - width: 85, - sortable: true, - //renderer: Ext.util.Format.dateRenderer('m/d/Y'), - xtype: 'datecolumn', // use xtype instead of renderer - format: 'M/d/Y' // configuration property for {@link Ext.grid.DateColumn} - }, { - ... - }] -}); - *
isColumn
is not set ColumnModel will recreate a new Ext.grid.Column - * Defaults to true. - */ - isColumn : true, + extend: 'Ext.layout.container.Auto', + alias: ['layout.column'], + alternateClassName: 'Ext.layout.ColumnLayout', - constructor : function(config){ - Ext.apply(this, config); + type: 'column', - if(Ext.isString(this.renderer)){ - this.renderer = Ext.util.Format[this.renderer]; - }else if(Ext.isObject(this.renderer)){ - this.scope = this.renderer.scope; - this.renderer = this.renderer.fn; - } - if(!this.scope){ - this.scope = this; - } + itemCls: Ext.baseCSSPrefix + 'column', - var ed = this.editor; - delete this.editor; - this.setEditor(ed); - this.addEvents( - /** - * @event click - * Fires when this Column is clicked. - * @param {Column} this - * @param {Grid} The owning GridPanel - * @param {Number} rowIndex - * @param {Ext.EventObject} e - */ - 'click', - /** - * @event contextmenu - * Fires when this Column is right clicked. - * @param {Column} this - * @param {Grid} The owning GridPanel - * @param {Number} rowIndex - * @param {Ext.EventObject} e - */ - 'contextmenu', - /** - * @event dblclick - * Fires when this Column is double clicked. - * @param {Column} this - * @param {Grid} The owning GridPanel - * @param {Number} rowIndex - * @param {Ext.EventObject} e - */ - 'dblclick', - /** - * @event mousedown - * Fires when this Column receives a mousedown event. - * @param {Column} this - * @param {Grid} The owning GridPanel - * @param {Number} rowIndex - * @param {Ext.EventObject} e - */ - 'mousedown' - ); - Ext.grid.Column.superclass.constructor.call(this); - }, + targetCls: Ext.baseCSSPrefix + 'column-layout-ct', - /** - * @private - * Process and refire events routed from the GridView's processEvent method. - * Returns the event handler's status to allow cancelling of GridView's bubbling process. - */ - processEvent : function(name, e, grid, rowIndex, colIndex){ - return this.fireEvent(name, this, grid, rowIndex, e); - }, + scrollOffset: 0, - /** - * @private - * Clean up. Remove any Editor. Remove any listeners. - */ - destroy: function() { - if(this.setEditor){ - this.setEditor(null); - } - this.purgeListeners(); - }, + bindToOwnerCtComponent: false, - /** - * Optional. A function which returns displayable data when passed the following parameters: - *- * @property renderer - * @type Function - */ - renderer : function(value){ - return value; - }, + getRenderTarget : function() { + if (!this.innerCt) { - // private - getEditor: function(rowIndex){ - return this.editable !== false ? this.editor : null; - }, + // the innerCt prevents wrapping and shuffling while + // the container is resizing + this.innerCt = this.getTarget().createChild({ + cls: Ext.baseCSSPrefix + 'column-inner' + }); - /** - * Sets a new editor for this column. - * @param {Ext.Editor/Ext.form.Field} editor The editor to set - */ - setEditor : function(editor){ - var ed = this.editor; - if(ed){ - if(ed.gridEditor){ - ed.gridEditor.destroy(); - delete ed.gridEditor; - }else{ - ed.destroy(); - } - } - this.editor = null; - if(editor){ - //not an instance, create it - if(!editor.isXType){ - editor = Ext.create(editor, 'textfield'); - } - this.editor = editor; + // 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; }, - /** - * Returns the {@link Ext.Editor editor} defined for this column that was created to wrap the {@link Ext.form.Field Field} - * used to edit the cell. - * @param {Number} rowIndex The row index - * @return {Ext.Editor} - */ - getCellEditor: function(rowIndex){ - var ed = this.getEditor(rowIndex); - if(ed){ - if(!ed.startEdit){ - if(!ed.gridEditor){ - ed.gridEditor = new Ext.grid.GridEditor(ed); - } - ed = ed.gridEditor; - } + // 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; } - return ed; - } -}); - -/** - * @class Ext.grid.BooleanColumn - * @extends Ext.grid.Column - *- *
- value : Object
- *The data value for the cell.
- metadata : Object
- *An object in which you may set the following attributes:
- *
- css : String
- *A CSS class name to add to the cell's TD element.
- attr : String
An HTML attribute definition string to apply to the data container - * element within the table cell (e.g. 'style="color:red;"').
- record : Ext.data.record
- *The {@link Ext.data.Record} from which the data was - * extracted.
- rowIndex : Number
- *Row index
- colIndex : Number
- *Column index
- store : Ext.data.Store
- *The {@link Ext.data.Store} object from which the Record - * was extracted.
A Column definition class which renders boolean data fields. See the {@link Ext.grid.Column#xtype xtype} - * config option of {@link Ext.grid.Column} for more details.
- */ -Ext.grid.BooleanColumn = Ext.extend(Ext.grid.Column, { - /** - * @cfg {String} trueText - * The string returned by the renderer when the column value is not falsy (defaults to 'true'). - */ - trueText: 'true', - /** - * @cfg {String} falseText - * The string returned by the renderer when the column value is falsy (but not undefined) (defaults to - * 'false'). - */ - falseText: 'false', - /** - * @cfg {String} undefinedText - * The string returned by the renderer when the column value is undefined (defaults to ' '). - */ - undefinedText: ' ', - constructor: function(cfg){ - Ext.grid.BooleanColumn.superclass.constructor.call(this, cfg); - var t = this.trueText, f = this.falseText, u = this.undefinedText; - this.renderer = function(v){ - if(v === undefined){ - return u; + // 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; } - if(!v || v === 'false'){ - return f; + } 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(); + } } - return t; - }; - } -}); - -/** - * @class Ext.grid.NumberColumn - * @extends Ext.grid.Column - *A Column definition class which renders a numeric data field according to a {@link #format} string. See the - * {@link Ext.grid.Column#xtype xtype} config option of {@link Ext.grid.Column} for more details.
- */ -Ext.grid.NumberColumn = Ext.extend(Ext.grid.Column, { - /** - * @cfg {String} format - * A formatting string as used by {@link Ext.util.Format#number} to format a numeric value for this Column - * (defaults to '0,000.00'). - */ - format : '0,000.00', - constructor: function(cfg){ - Ext.grid.NumberColumn.superclass.constructor.call(this, cfg); - this.renderer = Ext.util.Format.numberRenderer(this.format); - } -}); + } -/** - * @class Ext.grid.DateColumn - * @extends Ext.grid.Column - *A Column definition class which renders a passed date according to the default locale, or a configured - * {@link #format}. See the {@link Ext.grid.Column#xtype xtype} config option of {@link Ext.grid.Column} - * for more details.
- */ -Ext.grid.DateColumn = Ext.extend(Ext.grid.Column, { - /** - * @cfg {String} format - * A formatting string as used by {@link Date#format} to format a Date for this Column - * (defaults to 'm/d/Y'). - */ - format : 'm/d/Y', - constructor: function(cfg){ - Ext.grid.DateColumn.superclass.constructor.call(this, cfg); - this.renderer = Ext.util.Format.dateRenderer(this.format); - } -}); + availableWidth = size.width - me.scrollOffset; + me.innerCt.setWidth(availableWidth); -/** - * @class Ext.grid.TemplateColumn - * @extends Ext.grid.Column - *A Column definition class which renders a value by processing a {@link Ext.data.Record Record}'s - * {@link Ext.data.Record#data data} using a {@link #tpl configured} {@link Ext.XTemplate XTemplate}. - * See the {@link Ext.grid.Column#xtype xtype} config option of {@link Ext.grid.Column} for more - * details.
- */ -Ext.grid.TemplateColumn = Ext.extend(Ext.grid.Column, { - /** - * @cfg {String/XTemplate} tpl - * An {@link Ext.XTemplate XTemplate}, or an XTemplate definition string to use to process a - * {@link Ext.data.Record Record}'s {@link Ext.data.Record#data data} to produce a column's rendered value. - */ - constructor: function(cfg){ - Ext.grid.TemplateColumn.superclass.constructor.call(this, cfg); - var tpl = (!Ext.isPrimitive(this.tpl) && this.tpl.compile) ? this.tpl : new Ext.XTemplate(this.tpl); - this.renderer = function(value, p, r){ - return tpl.apply(r.data); - }; - this.tpl = tpl; - } -}); + // 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); + } + } -/** - * @class Ext.grid.ActionColumn - * @extends Ext.grid.Column - *A Grid column type which renders an icon, or a series of icons in a grid cell, and offers a scoped click - * handler for each icon. Example usage:
-- *-new Ext.grid.GridPanel({ - store: myStore, - columns: [ - { - xtype: 'actioncolumn', - width: 50, - items: [ - { - icon : 'sell.gif', // Use a URL in the icon config - tooltip: 'Sell stock', - handler: function(grid, rowIndex, colIndex) { - var rec = store.getAt(rowIndex); - alert("Sell " + rec.get('company')); - } - }, - { - getClass: function(v, meta, rec) { // Or return a class from a function - if (rec.get('change') < 0) { - this.items[1].tooltip = 'Do not buy!'; - return 'alert-col'; - } else { - this.items[1].tooltip = 'Buy stock'; - return 'buy-col'; - } - }, - handler: function(grid, rowIndex, colIndex) { - var rec = store.getAt(rowIndex); - alert("Buy " + rec.get('company')); - } + 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); } - ] + } } - //any other columns here - ] -}); -
The action column can be at any index in the columns array, and a grid can have any number of - * action columns.
- */ -Ext.grid.ActionColumn = Ext.extend(Ext.grid.Column, { - /** - * @cfg {String} icon - * The URL of an image to display as the clickable element in the column. - * Optional - defaults to{@link Ext#BLANK_IMAGE_URL Ext.BLANK_IMAGE_URL}
. - */ - /** - * @cfg {String} iconCls - * A CSS class to apply to the icon image. To determine the class dynamically, configure the Column with a{@link #getClass}
function. - */ - /** - * @cfg {Function} handler A function called when the icon is clicked. - * The handler is passed the following parameters:- */ - /** - * @cfg {Object} scope The scope (this reference) in which the- *
- - *
grid
: GridPanelThe owning GridPanel.- - *
rowIndex
: NumberThe row index clicked on.- - *
colIndex
: NumberThe column index clicked on.- - *
item
: ObjectThe clicked item (or this Column if multiple - * {@link #items} were not configured).- - *
e
: EventThe click event.{@link #handler}
- * and{@link #getClass}
fuctions are executed. Defaults to this Column. - */ - /** - * @cfg {String} tooltip A tooltip message to be displayed on hover. {@link Ext.QuickTips#init Ext.QuickTips} must have - * been initialized. - */ - /** - * @cfg {Boolean} stopSelection Defaults totrue
. Prevent grid row selection upon mousedown. - */ - /** - * @cfg {Function} getClass A function which returns the CSS class to apply to the icon image. - * The function is passed the following parameters:- */ - /** - * @cfg {Array} items An Array which may contain multiple icon definitions, each element of which may contain: - *- *
- v : Object
- *The value of the column's configured field (if any).
- metadata : Object
- *An object in which you may set the following attributes:
- *
- css : String
- *A CSS class name to add to the cell's TD element.
- attr : String
- *An HTML attribute definition string to apply to the data container element within the table cell - * (e.g. 'style="color:red;"').
- r : Ext.data.Record
- *The Record providing the data.
- rowIndex : Number
- *The row index..
- colIndex : Number
- *The column index.
- store : Ext.data.Store
- *The Store which is providing the data Model.
- */ - header: ' ', - actionIdRe: /x-action-col-(\d+)/, - - /** - * @cfg {String} altText The alt text to use for the image element. Defaults to ''. - */ - altText: '', + // 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) { - constructor: function(cfg) { - var me = this, - items = cfg.items || (me.items = [me]), - l = items.length, - i, - item; - - Ext.grid.ActionColumn.superclass.constructor.call(me, cfg); - -// Renderer closure iterates through items creating an element for each and tagging with an identifying -// class name x-action-col-{n} - me.renderer = function(v, meta) { -// Allow a configured renderer to create initial value (And set the other values in the "metadata" argument!) - v = Ext.isFunction(cfg.renderer) ? cfg.renderer.apply(this, arguments)||'' : ''; - - meta.css += ' x-action-col-cell'; - for (i = 0; i < l; i++) { - item = items[i]; - v += ''; + // 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'); } - return v; - }; - }, - destroy: function() { - delete this.items; - delete this.renderer; - return Ext.grid.ActionColumn.superclass.destroy.apply(this, arguments); + // 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; }, - /** - * @private - * Process and refire events routed from the GridView's processEvent method. - * Also fires any configured click handlers. By default, cancels the mousedown event to prevent selection. - * Returns the event handler's status to allow cancelling of GridView's bubbling process. - */ - processEvent : function(name, e, grid, rowIndex, colIndex){ - var m = e.getTarget().className.match(this.actionIdRe), - item, fn; - if (m && (item = this.items[parseInt(m[1], 10)])) { - if (name == 'click') { - (fn = item.handler || this.handler) && fn.call(item.scope||this.scope||this, grid, rowIndex, colIndex, item, e); - } else if ((name == 'mousedown') && (item.stopSelection !== false)) { - return false; - } + configureItem: function(item) { + if (item.columnWidth) { + item.layoutManagedWidth = 1; + } else { + item.layoutManagedWidth = 2; } - return Ext.grid.ActionColumn.superclass.processEvent.apply(this, arguments); + item.layoutManagedHeight = 2; + this.callParent(arguments); } -}); - -/* - * @property types - * @type Object - * @member Ext.grid.Column - * @static - *- *
- - *
icon
: StringThe url of an image to display as the clickable element - * in the column.- - *
iconCls
: StringA CSS class to apply to the icon image. - * To determine the class dynamically, configure the item with agetClass
function.- - *
getClass
: FunctionA function which returns the CSS class to apply to the icon image. - * The function is passed the following parameters:- *
- v : Object
- *The value of the column's configured field (if any).
- metadata : Object
- *An object in which you may set the following attributes:
- *
- css : String
- *A CSS class name to add to the cell's TD element.
- attr : String
- *An HTML attribute definition string to apply to the data container element within the table cell - * (e.g. 'style="color:red;"').
- r : Ext.data.Record
- *The Record providing the data.
- rowIndex : Number
- *The row index..
- colIndex : Number
- *The column index.
- store : Ext.data.Store
- *The Store which is providing the data Model.
- - *
handler
: FunctionA function called when the icon is clicked.- - *
scope
: ScopeThe scope (this
reference) in which the - *handler
andgetClass
functions are executed. Fallback defaults are this Column's - * configured scope, then this Column.- - *
tooltip
: StringA tooltip message to be displayed on hover. - * {@link Ext.QuickTips#init Ext.QuickTips} must have been initialized.An object containing predefined Column classes keyed by a mnemonic code which may be referenced - * by the {@link Ext.grid.ColumnModel#xtype xtype} config option of ColumnModel.
- *This contains the following properties
- */ -Ext.grid.Column.types = { - gridcolumn : Ext.grid.Column, - booleancolumn: Ext.grid.BooleanColumn, - numbercolumn: Ext.grid.NumberColumn, - datecolumn: Ext.grid.DateColumn, - templatecolumn: Ext.grid.TemplateColumn, - actioncolumn: Ext.grid.ActionColumn -}; +}); - \ No newline at end of file +- *
- gridcolumn : {@link Ext.grid.Column Column constructor}
- *- booleancolumn : {@link Ext.grid.BooleanColumn BooleanColumn constructor}
- *- numbercolumn : {@link Ext.grid.NumberColumn NumberColumn constructor}
- *- datecolumn : {@link Ext.grid.DateColumn DateColumn constructor}
- *- templatecolumn : {@link Ext.grid.TemplateColumn TemplateColumn constructor}
- *