/*!
- * Ext JS Library 3.1.1
- * Copyright(c) 2006-2010 Ext JS, LLC
+ * Ext JS Library 3.2.0
+ * Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
-/**\r
- * @class Ext.grid.Column\r
- * <p>This class encapsulates column configuration data to be used in the initialization of a\r
- * {@link Ext.grid.ColumnModel ColumnModel}.</p>\r
- * <p>While subclasses are provided to render data in different ways, this class renders a passed\r
- * data field unchanged and is usually used for textual columns.</p>\r
- */\r
-Ext.grid.Column = Ext.extend(Object, {\r
- /**\r
- * @cfg {Boolean} editable Optional. Defaults to <tt>true</tt>, enabling the configured\r
- * <tt>{@link #editor}</tt>. Set to <tt>false</tt> to initially disable editing on this column.\r
- * The initial configuration may be dynamically altered using\r
- * {@link Ext.grid.ColumnModel}.{@link Ext.grid.ColumnModel#setEditable setEditable()}.\r
- */\r
- /**\r
- * @cfg {String} id Optional. A name which identifies this column (defaults to the column's initial\r
- * ordinal position.) The <tt>id</tt> is used to create a CSS <b>class</b> name which is applied to all\r
- * table cells (including headers) in that column (in this context the <tt>id</tt> does not need to be\r
- * unique). The class name takes the form of <pre>x-grid3-td-<b>id</b></pre>\r
- * Header cells will also receive this class name, but will also have the class <pre>x-grid3-hd</pre>\r
- * So, to target header cells, use CSS selectors such as:<pre>.x-grid3-hd-row .x-grid3-td-<b>id</b></pre>\r
- * The {@link Ext.grid.GridPanel#autoExpandColumn} grid config option references the column via this\r
- * unique identifier.\r
- */\r
- /**\r
- * @cfg {String} header Optional. The header text to be used as innerHTML\r
- * (html tags are accepted) to display in the Grid view. <b>Note</b>: to\r
- * have a clickable header with no text displayed use <tt>' '</tt>.\r
- */\r
- /**\r
- * @cfg {Boolean} groupable Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option\r
- * may be used to disable the header menu item to group by the column selected. Defaults to <tt>true</tt>,\r
- * which enables the header menu group option. Set to <tt>false</tt> to disable (but still show) the\r
- * group option in the header menu for the column. See also <code>{@link #groupName}</code>.\r
- */\r
- /**\r
- * @cfg {String} groupName Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option\r
- * may be used to specify the text with which to prefix the group field value in the group header line.\r
- * See also {@link #groupRenderer} and\r
- * {@link Ext.grid.GroupingView}.{@link Ext.grid.GroupingView#showGroupName showGroupName}.\r
- */\r
- /**\r
- * @cfg {Function} groupRenderer <p>Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option\r
- * may be used to specify the function used to format the grouping field value for display in the group\r
- * {@link #groupName header}. If a <tt><b>groupRenderer</b></tt> is not specified, the configured\r
- * <tt><b>{@link #renderer}</b></tt> will be called; if a <tt><b>{@link #renderer}</b></tt> is also not specified\r
- * the new value of the group field will be used.</p>\r
- * <p>The called function (either the <tt><b>groupRenderer</b></tt> or <tt><b>{@link #renderer}</b></tt>) will be\r
- * passed the following parameters:\r
- * <div class="mdetail-params"><ul>\r
- * <li><b>v</b> : Object<p class="sub-desc">The new value of the group field.</p></li>\r
- * <li><b>unused</b> : undefined<p class="sub-desc">Unused parameter.</p></li>\r
- * <li><b>r</b> : Ext.data.Record<p class="sub-desc">The Record providing the data\r
- * for the row which caused group change.</p></li>\r
- * <li><b>rowIndex</b> : Number<p class="sub-desc">The row index of the Record which caused group change.</p></li>\r
- * <li><b>colIndex</b> : Number<p class="sub-desc">The column index of the group field.</p></li>\r
- * <li><b>ds</b> : Ext.data.Store<p class="sub-desc">The Store which is providing the data Model.</p></li>\r
- * </ul></div></p>\r
- * <p>The function should return a string value.</p>\r
- */\r
- /**\r
- * @cfg {String} emptyGroupText Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option\r
- * may be used to specify the text to display when there is an empty group value. Defaults to the\r
- * {@link Ext.grid.GroupingView}.{@link Ext.grid.GroupingView#emptyGroupText emptyGroupText}.\r
- */\r
- /**\r
- * @cfg {String} dataIndex <p><b>Required</b>. The name of the field in the\r
- * grid's {@link Ext.data.Store}'s {@link Ext.data.Record} definition from\r
- * which to draw the column's value.</p>\r
- */\r
- /**\r
- * @cfg {Number} width\r
- * Optional. The initial width in pixels of the column.\r
- * The width of each column can also be affected if any of the following are configured:\r
- * <div class="mdetail-params"><ul>\r
- * <li>{@link Ext.grid.GridPanel}.<tt>{@link Ext.grid.GridPanel#autoExpandColumn autoExpandColumn}</tt></li>\r
- * <li>{@link Ext.grid.GridView}.<tt>{@link Ext.grid.GridView#forceFit forceFit}</tt>\r
- * <div class="sub-desc">\r
- * <p>By specifying <tt>forceFit:true</tt>, {@link #fixed non-fixed width} columns will be\r
- * re-proportioned (based on the relative initial widths) to fill the width of the grid so\r
- * that no horizontal scrollbar is shown.</p>\r
- * </div></li>\r
- * <li>{@link Ext.grid.GridView}.<tt>{@link Ext.grid.GridView#autoFill autoFill}</tt></li>\r
- * <li>{@link Ext.grid.GridPanel}.<tt>{@link Ext.grid.GridPanel#minColumnWidth minColumnWidth}</tt></li>\r
- * <br><p><b>Note</b>: when the width of each column is determined, a space on the right side\r
- * is reserved for the vertical scrollbar. The\r
- * {@link Ext.grid.GridView}.<tt>{@link Ext.grid.GridView#scrollOffset scrollOffset}</tt>\r
- * can be modified to reduce or eliminate the reserved offset.</p>\r
- */\r
- /**\r
- * @cfg {Boolean} sortable Optional. <tt>true</tt> if sorting is to be allowed on this column.\r
- * Defaults to the value of the <code>{@link Ext.grid.ColumnModel#defaultSortable}</code> property.\r
- * Whether local/remote sorting is used is specified in <code>{@link Ext.data.Store#remoteSort}</code>.\r
- */\r
- /**\r
- * @cfg {Boolean} fixed Optional. <tt>true</tt> if the column width cannot be changed. Defaults to <tt>false</tt>.\r
- */\r
- /**\r
- * @cfg {Boolean} resizable Optional. <tt>false</tt> to disable column resizing. Defaults to <tt>true</tt>.\r
- */\r
- /**\r
- * @cfg {Boolean} menuDisabled Optional. <tt>true</tt> to disable the column menu. Defaults to <tt>false</tt>.\r
- */\r
- /**\r
- * @cfg {Boolean} hidden\r
- * Optional. <tt>true</tt> to initially hide this column. Defaults to <tt>false</tt>.\r
- * A hidden column {@link Ext.grid.GridPanel#enableColumnHide may be shown via the header row menu}.\r
- * If a column is never to be shown, simply do not include this column in the Column Model at all. \r
- */\r
- /**\r
- * @cfg {String} tooltip Optional. A text string to use as the column header's tooltip. If Quicktips\r
- * are enabled, this value will be used as the text of the quick tip, otherwise it will be set as the\r
- * header's HTML title attribute. Defaults to ''.\r
- */\r
- /**\r
- * @cfg {Mixed} renderer\r
- * <p>For an alternative to specifying a renderer see <code>{@link #xtype}</code></p>\r
- * <p>Optional. A renderer is an 'interceptor' method which can be used transform data (value,\r
- * appearance, etc.) before it is rendered). This may be specified in either of three ways:\r
- * <div class="mdetail-params"><ul>\r
- * <li>A renderer function used to return HTML markup for a cell given the cell's data value.</li>\r
- * <li>A string which references a property name of the {@link Ext.util.Format} class which\r
- * provides a renderer function.</li>\r
- * <li>An object specifying both the renderer function, and its execution scope (<tt><b>this</b></tt>\r
- * reference) e.g.:<pre style="margin-left:1.2em"><code>\r
-{\r
- fn: this.gridRenderer,\r
- scope: this\r
-}\r
-</code></pre></li></ul></div>\r
- * If not specified, the default renderer uses the raw data value.</p>\r
- * <p>For information about the renderer function (passed parameters, etc.), see\r
- * {@link Ext.grid.ColumnModel#setRenderer}. An example of specifying renderer function inline:</p><pre><code>\r
-var companyColumn = {\r
- header: 'Company Name',\r
- dataIndex: 'company',\r
- renderer: function(value, metaData, record, rowIndex, colIndex, store) {\r
- // provide the logic depending on business rules\r
- // name of your own choosing to manipulate the cell depending upon\r
- // the data in the underlying Record object.\r
- if (value == 'whatever') {\r
- //metaData.css : String : A CSS class name to add to the TD element of the cell.\r
- //metaData.attr : String : An html attribute definition string to apply to\r
- // the data container element within the table\r
- // cell (e.g. 'style="color:red;"').\r
- metaData.css = 'name-of-css-class-you-will-define';\r
- }\r
- return value;\r
- }\r
-}\r
- * </code></pre>\r
- * See also {@link #scope}.\r
- */\r
- /**\r
- * @cfg {String} xtype Optional. A String which references a predefined {@link Ext.grid.Column} subclass\r
- * type which is preconfigured with an appropriate <code>{@link #renderer}</code> to be easily\r
- * configured into a ColumnModel. The predefined {@link Ext.grid.Column} subclass types are:\r
- * <div class="mdetail-params"><ul>\r
- * <li><b><tt>gridcolumn</tt></b> : {@link Ext.grid.Column} (<b>Default</b>)<p class="sub-desc"></p></li>\r
- * <li><b><tt>booleancolumn</tt></b> : {@link Ext.grid.BooleanColumn}<p class="sub-desc"></p></li>\r
- * <li><b><tt>numbercolumn</tt></b> : {@link Ext.grid.NumberColumn}<p class="sub-desc"></p></li>\r
- * <li><b><tt>datecolumn</tt></b> : {@link Ext.grid.DateColumn}<p class="sub-desc"></p></li>\r
- * <li><b><tt>templatecolumn</tt></b> : {@link Ext.grid.TemplateColumn}<p class="sub-desc"></p></li>\r
- * </ul></div>\r
- * <p>Configuration properties for the specified <code>xtype</code> may be specified with\r
- * the Column configuration properties, for example:</p>\r
- * <pre><code>\r
-var grid = new Ext.grid.GridPanel({\r
- ...\r
- columns: [{\r
- header: 'Last Updated',\r
- dataIndex: 'lastChange',\r
- width: 85,\r
- sortable: true,\r
- //renderer: Ext.util.Format.dateRenderer('m/d/Y'),\r
- xtype: 'datecolumn', // use xtype instead of renderer\r
- format: 'M/d/Y' // configuration property for {@link Ext.grid.DateColumn}\r
- }, {\r
- ...\r
- }]\r
-});\r
- * </code></pre>\r
- */\r
- /**\r
- * @cfg {Object} scope Optional. The scope (<tt><b>this</b></tt> reference) in which to execute the\r
- * renderer. Defaults to the Column configuration object.\r
- */\r
- /**\r
- * @cfg {String} align Optional. Set the CSS text-align property of the column. Defaults to undefined.\r
- */\r
- /**\r
- * @cfg {String} css Optional. An inline style definition string which is applied to all table cells in the column\r
- * (excluding headers). Defaults to undefined.\r
- */\r
- /**\r
- * @cfg {Boolean} hideable Optional. Specify as <tt>false</tt> to prevent the user from hiding this column\r
- * (defaults to true). To disallow column hiding globally for all columns in the grid, use\r
- * {@link Ext.grid.GridPanel#enableColumnHide} instead.\r
- */\r
- /**\r
- * @cfg {Ext.form.Field} editor Optional. The {@link Ext.form.Field} to use when editing values in this column\r
- * if editing is supported by the grid. See <tt>{@link #editable}</tt> also.\r
- */\r
-\r
- /**\r
- * @private\r
- * @cfg {Boolean} isColumn\r
- * Used by ColumnModel setConfig method to avoid reprocessing a Column\r
- * if <code>isColumn</code> is not set ColumnModel will recreate a new Ext.grid.Column\r
- * Defaults to true.\r
- */\r
- isColumn : true,\r
- \r
- constructor : function(config){\r
- Ext.apply(this, config);\r
- \r
- if(Ext.isString(this.renderer)){\r
- this.renderer = Ext.util.Format[this.renderer];\r
- }else if(Ext.isObject(this.renderer)){\r
- this.scope = this.renderer.scope;\r
- this.renderer = this.renderer.fn;\r
- }\r
- if(!this.scope){\r
- this.scope = this;\r
- }\r
- \r
- var ed = this.editor;\r
- delete this.editor;\r
- this.setEditor(ed);\r
- },\r
-\r
- /**\r
- * Optional. A function which returns displayable data when passed the following parameters:\r
- * <div class="mdetail-params"><ul>\r
- * <li><b>value</b> : Object<p class="sub-desc">The data value for the cell.</p></li>\r
- * <li><b>metadata</b> : Object<p class="sub-desc">An object in which you may set the following attributes:<ul>\r
- * <li><b>css</b> : String<p class="sub-desc">A CSS class name to add to the cell's TD element.</p></li>\r
- * <li><b>attr</b> : String<p class="sub-desc">An HTML attribute definition string to apply to the data container\r
- * element <i>within</i> the table cell (e.g. 'style="color:red;"').</p></li></ul></p></li>\r
- * <li><b>record</b> : Ext.data.record<p class="sub-desc">The {@link Ext.data.Record} from which the data was\r
- * extracted.</p></li>\r
- * <li><b>rowIndex</b> : Number<p class="sub-desc">Row index</p></li>\r
- * <li><b>colIndex</b> : Number<p class="sub-desc">Column index</p></li>\r
- * <li><b>store</b> : Ext.data.Store<p class="sub-desc">The {@link Ext.data.Store} object from which the Record\r
- * was extracted.</p></li>\r
- * </ul></div>\r
- * @property renderer\r
- * @type Function\r
- */\r
- renderer : function(value){\r
- if(Ext.isString(value) && value.length < 1){\r
- return ' ';\r
- }\r
- return value;\r
- },\r
-\r
- // private\r
- getEditor: function(rowIndex){\r
- return this.editable !== false ? this.editor : null;\r
- },\r
- \r
- /**\r
- * Sets a new editor for this column.\r
- * @param {Ext.Editor/Ext.form.Field} editor The editor to set\r
- */\r
- setEditor : function(editor){\r
- if(this.editor){\r
- this.editor.destroy();\r
- }\r
- this.editor = null;\r
- if(editor){\r
- //not an instance, create it\r
- if(!editor.isXType){\r
- editor = Ext.create(editor, 'textfield');\r
- }\r
- //check if it's wrapped in an editor\r
- if(!editor.startEdit){\r
- editor = new Ext.grid.GridEditor(editor);\r
- }\r
- this.editor = editor;\r
- }\r
- },\r
- \r
- destroy : function(){\r
- this.setEditor(null);\r
- },\r
-\r
- /**\r
- * Returns the {@link Ext.Editor editor} defined for this column that was created to wrap the {@link Ext.form.Field Field}\r
- * used to edit the cell.\r
- * @param {Number} rowIndex The row index\r
- * @return {Ext.Editor}\r
- */\r
- getCellEditor: function(rowIndex){\r
- return this.getEditor(rowIndex);\r
- }\r
-});\r
-\r
-/**\r
- * @class Ext.grid.BooleanColumn\r
- * @extends Ext.grid.Column\r
- * <p>A Column definition class which renders boolean data fields. See the {@link Ext.grid.Column#xtype xtype}\r
- * config option of {@link Ext.grid.Column} for more details.</p>\r
- */\r
-Ext.grid.BooleanColumn = Ext.extend(Ext.grid.Column, {\r
- /**\r
- * @cfg {String} trueText\r
- * The string returned by the renderer when the column value is not falsey (defaults to <tt>'true'</tt>).\r
- */\r
- trueText: 'true',\r
- /**\r
- * @cfg {String} falseText\r
- * The string returned by the renderer when the column value is falsey (but not undefined) (defaults to\r
- * <tt>'false'</tt>).\r
- */\r
- falseText: 'false',\r
- /**\r
- * @cfg {String} undefinedText\r
- * The string returned by the renderer when the column value is undefined (defaults to <tt>' '</tt>).\r
- */\r
- undefinedText: ' ',\r
-\r
- constructor: function(cfg){\r
- Ext.grid.BooleanColumn.superclass.constructor.call(this, cfg);\r
- var t = this.trueText, f = this.falseText, u = this.undefinedText;\r
- this.renderer = function(v){\r
- if(v === undefined){\r
- return u;\r
- }\r
- if(!v || v === 'false'){\r
- return f;\r
- }\r
- return t;\r
- };\r
- }\r
-});\r
-\r
-/**\r
- * @class Ext.grid.NumberColumn\r
- * @extends Ext.grid.Column\r
- * <p>A Column definition class which renders a numeric data field according to a {@link #format} string. See the\r
- * {@link Ext.grid.Column#xtype xtype} config option of {@link Ext.grid.Column} for more details.</p>\r
- */\r
-Ext.grid.NumberColumn = Ext.extend(Ext.grid.Column, {\r
- /**\r
- * @cfg {String} format\r
- * A formatting string as used by {@link Ext.util.Format#number} to format a numeric value for this Column\r
- * (defaults to <tt>'0,000.00'</tt>).\r
- */\r
- format : '0,000.00',\r
- constructor: function(cfg){\r
- Ext.grid.NumberColumn.superclass.constructor.call(this, cfg);\r
- this.renderer = Ext.util.Format.numberRenderer(this.format);\r
- }\r
-});\r
-\r
-/**\r
- * @class Ext.grid.DateColumn\r
- * @extends Ext.grid.Column\r
- * <p>A Column definition class which renders a passed date according to the default locale, or a configured\r
- * {@link #format}. See the {@link Ext.grid.Column#xtype xtype} config option of {@link Ext.grid.Column}\r
- * for more details.</p>\r
- */\r
-Ext.grid.DateColumn = Ext.extend(Ext.grid.Column, {\r
- /**\r
- * @cfg {String} format\r
- * A formatting string as used by {@link Date#format} to format a Date for this Column\r
- * (defaults to <tt>'m/d/Y'</tt>).\r
- */\r
- format : 'm/d/Y',\r
- constructor: function(cfg){\r
- Ext.grid.DateColumn.superclass.constructor.call(this, cfg);\r
- this.renderer = Ext.util.Format.dateRenderer(this.format);\r
- }\r
-});\r
-\r
-/**\r
- * @class Ext.grid.TemplateColumn\r
- * @extends Ext.grid.Column\r
- * <p>A Column definition class which renders a value by processing a {@link Ext.data.Record Record}'s\r
- * {@link Ext.data.Record#data data} using a {@link #tpl configured} {@link Ext.XTemplate XTemplate}.\r
- * See the {@link Ext.grid.Column#xtype xtype} config option of {@link Ext.grid.Column} for more\r
- * details.</p>\r
- */\r
-Ext.grid.TemplateColumn = Ext.extend(Ext.grid.Column, {\r
- /**\r
- * @cfg {String/XTemplate} tpl\r
- * An {@link Ext.XTemplate XTemplate}, or an XTemplate <i>definition string</i> to use to process a\r
- * {@link Ext.data.Record Record}'s {@link Ext.data.Record#data data} to produce a column's rendered value.\r
- */\r
- constructor: function(cfg){\r
- Ext.grid.TemplateColumn.superclass.constructor.call(this, cfg);\r
- var tpl = (!Ext.isPrimitive(this.tpl) && this.tpl.compile) ? this.tpl : new Ext.XTemplate(this.tpl);\r
- this.renderer = function(value, p, r){\r
- return tpl.apply(r.data);\r
- };\r
- this.tpl = tpl;\r
- }\r
-});\r
-\r
-/*\r
- * @property types\r
- * @type Object\r
- * @member Ext.grid.Column\r
- * @static\r
- * <p>An object containing predefined Column classes keyed by a mnemonic code which may be referenced\r
- * by the {@link Ext.grid.ColumnModel#xtype xtype} config option of ColumnModel.</p>\r
- * <p>This contains the following properties</p><div class="mdesc-details"><ul>\r
- * <li>gridcolumn : <b>{@link Ext.grid.Column Column constructor}</b></li>\r
- * <li>booleancolumn : <b>{@link Ext.grid.BooleanColumn BooleanColumn constructor}</b></li>\r
- * <li>numbercolumn : <b>{@link Ext.grid.NumberColumn NumberColumn constructor}</b></li>\r
- * <li>datecolumn : <b>{@link Ext.grid.DateColumn DateColumn constructor}</b></li>\r
- * <li>templatecolumn : <b>{@link Ext.grid.TemplateColumn TemplateColumn constructor}</b></li>\r
- * </ul></div>\r
- */\r
-Ext.grid.Column.types = {\r
- gridcolumn : Ext.grid.Column,\r
- booleancolumn: Ext.grid.BooleanColumn,\r
- numbercolumn: Ext.grid.NumberColumn,\r
- datecolumn: Ext.grid.DateColumn,\r
- templatecolumn: Ext.grid.TemplateColumn\r
+/**
+ * @class Ext.grid.Column
+ * <p>This class encapsulates column configuration data to be used in the initialization of a
+ * {@link Ext.grid.ColumnModel ColumnModel}.</p>
+ * <p>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.</p>
+ */
+Ext.grid.Column = Ext.extend(Object, {
+ /**
+ * @cfg {Boolean} editable Optional. Defaults to <tt>true</tt>, enabling the configured
+ * <tt>{@link #editor}</tt>. Set to <tt>false</tt> 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 <tt>id</tt> is used to create a CSS <b>class</b> name which is applied to all
+ * table cells (including headers) in that column (in this context the <tt>id</tt> does not need to be
+ * unique). The class name takes the form of <pre>x-grid3-td-<b>id</b></pre>
+ * Header cells will also receive this class name, but will also have the class <pre>x-grid3-hd</pre>
+ * So, to target header cells, use CSS selectors such as:<pre>.x-grid3-hd-row .x-grid3-td-<b>id</b></pre>
+ * 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. <b>Note</b>: to
+ * have a clickable header with no text displayed use <tt>' '</tt>.
+ */
+ /**
+ * @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 <tt>true</tt>,
+ * which enables the header menu group option. Set to <tt>false</tt> to disable (but still show) the
+ * group option in the header menu for the column. See also <code>{@link #groupName}</code>.
+ */
+ /**
+ * @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 <p>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 <tt><b>groupRenderer</b></tt> is not specified, the configured
+ * <tt><b>{@link #renderer}</b></tt> will be called; if a <tt><b>{@link #renderer}</b></tt> is also not specified
+ * the new value of the group field will be used.</p>
+ * <p>The called function (either the <tt><b>groupRenderer</b></tt> or <tt><b>{@link #renderer}</b></tt>) will be
+ * passed the following parameters:
+ * <div class="mdetail-params"><ul>
+ * <li><b>v</b> : Object<p class="sub-desc">The new value of the group field.</p></li>
+ * <li><b>unused</b> : undefined<p class="sub-desc">Unused parameter.</p></li>
+ * <li><b>r</b> : Ext.data.Record<p class="sub-desc">The Record providing the data
+ * for the row which caused group change.</p></li>
+ * <li><b>rowIndex</b> : Number<p class="sub-desc">The row index of the Record which caused group change.</p></li>
+ * <li><b>colIndex</b> : Number<p class="sub-desc">The column index of the group field.</p></li>
+ * <li><b>ds</b> : Ext.data.Store<p class="sub-desc">The Store which is providing the data Model.</p></li>
+ * </ul></div></p>
+ * <p>The function should return a string value.</p>
+ */
+ /**
+ * @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 <p><b>Required</b>. 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.</p>
+ */
+ /**
+ * @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:
+ * <div class="mdetail-params"><ul>
+ * <li>{@link Ext.grid.GridPanel}.<tt>{@link Ext.grid.GridPanel#autoExpandColumn autoExpandColumn}</tt></li>
+ * <li>{@link Ext.grid.GridView}.<tt>{@link Ext.grid.GridView#forceFit forceFit}</tt>
+ * <div class="sub-desc">
+ * <p>By specifying <tt>forceFit:true</tt>, {@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.</p>
+ * </div></li>
+ * <li>{@link Ext.grid.GridView}.<tt>{@link Ext.grid.GridView#autoFill autoFill}</tt></li>
+ * <li>{@link Ext.grid.GridPanel}.<tt>{@link Ext.grid.GridPanel#minColumnWidth minColumnWidth}</tt></li>
+ * <br><p><b>Note</b>: 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}.<tt>{@link Ext.grid.GridView#scrollOffset scrollOffset}</tt>
+ * can be modified to reduce or eliminate the reserved offset.</p>
+ */
+ /**
+ * @cfg {Boolean} sortable Optional. <tt>true</tt> if sorting is to be allowed on this column.
+ * Defaults to the value of the <code>{@link Ext.grid.ColumnModel#defaultSortable}</code> property.
+ * Whether local/remote sorting is used is specified in <code>{@link Ext.data.Store#remoteSort}</code>.
+ */
+ /**
+ * @cfg {Boolean} fixed Optional. <tt>true</tt> if the column width cannot be changed. Defaults to <tt>false</tt>.
+ */
+ /**
+ * @cfg {Boolean} resizable Optional. <tt>false</tt> to disable column resizing. Defaults to <tt>true</tt>.
+ */
+ /**
+ * @cfg {Boolean} menuDisabled Optional. <tt>true</tt> to disable the column menu. Defaults to <tt>false</tt>.
+ */
+ /**
+ * @cfg {Boolean} hidden
+ * Optional. <tt>true</tt> to initially hide this column. Defaults to <tt>false</tt>.
+ * 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
+ * <p>For an alternative to specifying a renderer see <code>{@link #xtype}</code></p>
+ * <p>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:
+ * <div class="mdetail-params"><ul>
+ * <li>A renderer function used to return HTML markup for a cell given the cell's data value.</li>
+ * <li>A string which references a property name of the {@link Ext.util.Format} class which
+ * provides a renderer function.</li>
+ * <li>An object specifying both the renderer function, and its execution scope (<tt><b>this</b></tt>
+ * reference) e.g.:<pre style="margin-left:1.2em"><code>
+{
+ fn: this.gridRenderer,
+ scope: this
+}
+</code></pre></li></ul></div>
+ * If not specified, the default renderer uses the raw data value.</p>
+ * <p>For information about the renderer function (passed parameters, etc.), see
+ * {@link Ext.grid.ColumnModel#setRenderer}. An example of specifying renderer function inline:</p><pre><code>
+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;
+ }
+}
+ * </code></pre>
+ * 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 <code>{@link #renderer}</code> to be easily
+ * configured into a ColumnModel. The predefined {@link Ext.grid.Column} subclass types are:
+ * <div class="mdetail-params"><ul>
+ * <li><b><tt>gridcolumn</tt></b> : {@link Ext.grid.Column} (<b>Default</b>)<p class="sub-desc"></p></li>
+ * <li><b><tt>booleancolumn</tt></b> : {@link Ext.grid.BooleanColumn}<p class="sub-desc"></p></li>
+ * <li><b><tt>numbercolumn</tt></b> : {@link Ext.grid.NumberColumn}<p class="sub-desc"></p></li>
+ * <li><b><tt>datecolumn</tt></b> : {@link Ext.grid.DateColumn}<p class="sub-desc"></p></li>
+ * <li><b><tt>templatecolumn</tt></b> : {@link Ext.grid.TemplateColumn}<p class="sub-desc"></p></li>
+ * </ul></div>
+ * <p>Configuration properties for the specified <code>xtype</code> may be specified with
+ * the Column configuration properties, for example:</p>
+ * <pre><code>
+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}
+ }, {
+ ...
+ }]
+});
+ * </code></pre>
+ */
+ /**
+ * @cfg {Object} scope Optional. The scope (<tt><b>this</b></tt> 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 <tt>false</tt> 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 <tt>{@link #editable}</tt> also.
+ */
+
+ /**
+ * @private
+ * @cfg {Boolean} isColumn
+ * Used by ColumnModel setConfig method to avoid reprocessing a Column
+ * if <code>isColumn</code> is not set ColumnModel will recreate a new Ext.grid.Column
+ * Defaults to true.
+ */
+ isColumn : true,
+
+ constructor : function(config){
+ Ext.apply(this, config);
+
+ 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;
+ }
+
+ var ed = this.editor;
+ delete this.editor;
+ this.setEditor(ed);
+ },
+
+ /**
+ * Optional. A function which returns displayable data when passed the following parameters:
+ * <div class="mdetail-params"><ul>
+ * <li><b>value</b> : Object<p class="sub-desc">The data value for the cell.</p></li>
+ * <li><b>metadata</b> : Object<p class="sub-desc">An object in which you may set the following attributes:<ul>
+ * <li><b>css</b> : String<p class="sub-desc">A CSS class name to add to the cell's TD element.</p></li>
+ * <li><b>attr</b> : String<p class="sub-desc">An HTML attribute definition string to apply to the data container
+ * element <i>within</i> the table cell (e.g. 'style="color:red;"').</p></li></ul></p></li>
+ * <li><b>record</b> : Ext.data.record<p class="sub-desc">The {@link Ext.data.Record} from which the data was
+ * extracted.</p></li>
+ * <li><b>rowIndex</b> : Number<p class="sub-desc">Row index</p></li>
+ * <li><b>colIndex</b> : Number<p class="sub-desc">Column index</p></li>
+ * <li><b>store</b> : Ext.data.Store<p class="sub-desc">The {@link Ext.data.Store} object from which the Record
+ * was extracted.</p></li>
+ * </ul></div>
+ * @property renderer
+ * @type Function
+ */
+ renderer : function(value){
+ if(Ext.isString(value) && value.length < 1){
+ return ' ';
+ }
+ return value;
+ },
+
+ // private
+ getEditor: function(rowIndex){
+ return this.editable !== false ? this.editor : null;
+ },
+
+ /**
+ * 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;
+ }
+ },
+
+ /**
+ * 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;
+ }
+ }
+ return ed;
+ }
+});
+
+/**
+ * @class Ext.grid.BooleanColumn
+ * @extends Ext.grid.Column
+ * <p>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.</p>
+ */
+Ext.grid.BooleanColumn = Ext.extend(Ext.grid.Column, {
+ /**
+ * @cfg {String} trueText
+ * The string returned by the renderer when the column value is not falsey (defaults to <tt>'true'</tt>).
+ */
+ trueText: 'true',
+ /**
+ * @cfg {String} falseText
+ * The string returned by the renderer when the column value is falsey (but not undefined) (defaults to
+ * <tt>'false'</tt>).
+ */
+ falseText: 'false',
+ /**
+ * @cfg {String} undefinedText
+ * The string returned by the renderer when the column value is undefined (defaults to <tt>' '</tt>).
+ */
+ 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;
+ }
+ if(!v || v === 'false'){
+ return f;
+ }
+ return t;
+ };
+ }
+});
+
+/**
+ * @class Ext.grid.NumberColumn
+ * @extends Ext.grid.Column
+ * <p>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.</p>
+ */
+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 <tt>'0,000.00'</tt>).
+ */
+ 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
+ * <p>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.</p>
+ */
+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 <tt>'m/d/Y'</tt>).
+ */
+ format : 'm/d/Y',
+ constructor: function(cfg){
+ Ext.grid.DateColumn.superclass.constructor.call(this, cfg);
+ this.renderer = Ext.util.Format.dateRenderer(this.format);
+ }
+});
+
+/**
+ * @class Ext.grid.TemplateColumn
+ * @extends Ext.grid.Column
+ * <p>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.</p>
+ */
+Ext.grid.TemplateColumn = Ext.extend(Ext.grid.Column, {
+ /**
+ * @cfg {String/XTemplate} tpl
+ * An {@link Ext.XTemplate XTemplate}, or an XTemplate <i>definition string</i> 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;
+ }
+});
+
+/*
+ * @property types
+ * @type Object
+ * @member Ext.grid.Column
+ * @static
+ * <p>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.</p>
+ * <p>This contains the following properties</p><div class="mdesc-details"><ul>
+ * <li>gridcolumn : <b>{@link Ext.grid.Column Column constructor}</b></li>
+ * <li>booleancolumn : <b>{@link Ext.grid.BooleanColumn BooleanColumn constructor}</b></li>
+ * <li>numbercolumn : <b>{@link Ext.grid.NumberColumn NumberColumn constructor}</b></li>
+ * <li>datecolumn : <b>{@link Ext.grid.DateColumn DateColumn constructor}</b></li>
+ * <li>templatecolumn : <b>{@link Ext.grid.TemplateColumn TemplateColumn constructor}</b></li>
+ * </ul></div>
+ */
+Ext.grid.Column.types = {
+ gridcolumn : Ext.grid.Column,
+ booleancolumn: Ext.grid.BooleanColumn,
+ numbercolumn: Ext.grid.NumberColumn,
+ datecolumn: Ext.grid.DateColumn,
+ templatecolumn: Ext.grid.TemplateColumn
};
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff