-<html>\r
-<head>\r
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> \r
- <title>The source code</title>\r
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
- <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
-</head>\r
-<body onload="prettyPrint();">\r
- <pre class="prettyprint lang-js"><div id="cls-Ext.grid.Column"></div>/**\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
- <div id="cfg-Ext.grid.Column-editable"></div>/**\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
- <div id="cfg-Ext.grid.Column-id"></div>/**\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
- <div id="cfg-Ext.grid.Column-header"></div>/**\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
- <div id="cfg-Ext.grid.Column-groupable"></div>/**\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
- <div id="cfg-Ext.grid.Column-groupName"></div>/**\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
- <div id="cfg-Ext.grid.Column-groupRenderer"></div>/**\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
- <div id="cfg-Ext.grid.Column-emptyGroupText"></div>/**\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
- <div id="cfg-Ext.grid.Column-dataIndex"></div>/**\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
- <div id="cfg-Ext.grid.Column-width"></div>/**\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
- <div id="cfg-Ext.grid.Column-sortable"></div>/**\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
- <div id="cfg-Ext.grid.Column-fixed"></div>/**\r
- * @cfg {Boolean} fixed Optional. <tt>true</tt> if the column width cannot be changed. Defaults to <tt>false</tt>.\r
- */\r
- <div id="cfg-Ext.grid.Column-resizable"></div>/**\r
- * @cfg {Boolean} resizable Optional. <tt>false</tt> to disable column resizing. Defaults to <tt>true</tt>.\r
- */\r
- <div id="cfg-Ext.grid.Column-menuDisabled"></div>/**\r
- * @cfg {Boolean} menuDisabled Optional. <tt>true</tt> to disable the column menu. Defaults to <tt>false</tt>.\r
- */\r
- <div id="cfg-Ext.grid.Column-hidden"></div>/**\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
- <div id="cfg-Ext.grid.Column-tooltip"></div>/**\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
- <div id="cfg-Ext.grid.Column-renderer"></div>/**\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
- <div id="cfg-Ext.grid.Column-xtype"></div>/**\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
- <div id="cfg-Ext.grid.Column-scope"></div>/**\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
- <div id="cfg-Ext.grid.Column-align"></div>/**\r
- * @cfg {String} align Optional. Set the CSS text-align property of the column. Defaults to undefined.\r
- */\r
- <div id="cfg-Ext.grid.Column-css"></div>/**\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
- <div id="cfg-Ext.grid.Column-hideable"></div>/**\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
- <div id="cfg-Ext.grid.Column-editor"></div>/**\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
- if(this.editor){\r
- this.editor = Ext.create(this.editor, 'textfield');\r
- }\r
- },\r
-\r
- <div id="prop-Ext.grid.Column-renderer"></div>/**\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
- <div id="method-Ext.grid.Column-getCellEditor"></div>/**\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
- var editor = this.getEditor(rowIndex);\r
- if(editor){\r
- if(!editor.startEdit){\r
- if(!editor.gridEditor){\r
- editor.gridEditor = new Ext.grid.GridEditor(editor);\r
- }\r
- return editor.gridEditor;\r
- }else if(editor.startEdit){\r
- return editor;\r
- }\r
- }\r
- return null;\r
- }\r
-});\r
-\r
-<div id="cls-Ext.grid.BooleanColumn"></div>/**\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
- <div id="cfg-Ext.grid.BooleanColumn-trueText"></div>/**\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
- <div id="cfg-Ext.grid.BooleanColumn-falseText"></div>/**\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
- <div id="cfg-Ext.grid.BooleanColumn-undefinedText"></div>/**\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
-<div id="cls-Ext.grid.NumberColumn"></div>/**\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
- <div id="cfg-Ext.grid.NumberColumn-format"></div>/**\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
-<div id="cls-Ext.grid.DateColumn"></div>/**\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
- <div id="cfg-Ext.grid.DateColumn-format"></div>/**\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
-<div id="cls-Ext.grid.TemplateColumn"></div>/**\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
- <div id="cfg-Ext.grid.TemplateColumn-tpl"></div>/**\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
-};</pre> \r
-</body>\r
-</html>
\ No newline at end of file
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>The source code</title>
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+ <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+ <style type="text/css">
+ .highlight { display: block; background-color: #ddd; }
+ </style>
+ <script type="text/javascript">
+ function highlight() {
+ document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+ }
+ </script>
+</head>
+<body onload="prettyPrint(); highlight();">
+ <pre class="prettyprint lang-js"><span id='Ext-grid-column-Column'>/**
+</span> * This class specifies the definition for a column inside a {@link Ext.grid.Panel}. It encompasses
+ * both the grid header configuration as well as displaying data within the grid itself. If the
+ * {@link #columns} configuration is specified, this column will become a column group and can
+ * contain other columns inside. In general, this class will not be created directly, rather
+ * an array of column configurations will be passed to the grid:
+ *
+ * @example
+ * Ext.create('Ext.data.Store', {
+ * storeId:'employeeStore',
+ * fields:['firstname', 'lastname', 'senority', 'dep', 'hired'],
+ * data:[
+ * {firstname:"Michael", lastname:"Scott", senority:7, dep:"Manangement", hired:"01/10/2004"},
+ * {firstname:"Dwight", lastname:"Schrute", senority:2, dep:"Sales", hired:"04/01/2004"},
+ * {firstname:"Jim", lastname:"Halpert", senority:3, dep:"Sales", hired:"02/22/2006"},
+ * {firstname:"Kevin", lastname:"Malone", senority:4, dep:"Accounting", hired:"06/10/2007"},
+ * {firstname:"Angela", lastname:"Martin", senority:5, dep:"Accounting", hired:"10/21/2008"}
+ * ]
+ * });
+ *
+ * Ext.create('Ext.grid.Panel', {
+ * title: 'Column Demo',
+ * store: Ext.data.StoreManager.lookup('employeeStore'),
+ * columns: [
+ * {text: 'First Name', dataIndex:'firstname'},
+ * {text: 'Last Name', dataIndex:'lastname'},
+ * {text: 'Hired Month', dataIndex:'hired', xtype:'datecolumn', format:'M'},
+ * {text: 'Department (Yrs)', xtype:'templatecolumn', tpl:'{dep} ({senority})'}
+ * ],
+ * width: 400,
+ * renderTo: Ext.getBody()
+ * });
+ *
+ * # Convenience Subclasses
+ *
+ * There are several column subclasses that provide default rendering for various data types
+ *
+ * - {@link Ext.grid.column.Action}: Renders icons that can respond to click events inline
+ * - {@link Ext.grid.column.Boolean}: Renders for boolean values
+ * - {@link Ext.grid.column.Date}: Renders for date values
+ * - {@link Ext.grid.column.Number}: Renders for numeric values
+ * - {@link Ext.grid.column.Template}: Renders a value using an {@link Ext.XTemplate} using the record data
+ *
+ * # Setting Sizes
+ *
+ * The columns are laid out by a {@link Ext.layout.container.HBox} layout, so a column can either
+ * be given an explicit width value or a flex configuration. If no width is specified the grid will
+ * automatically the size the column to 100px. For column groups, the size is calculated by measuring
+ * the width of the child columns, so a width option should not be specified in that case.
+ *
+ * # Header Options
+ *
+ * - {@link #text}: Sets the header text for the column
+ * - {@link #sortable}: Specifies whether the column can be sorted by clicking the header or using the column menu
+ * - {@link #hideable}: Specifies whether the column can be hidden using the column menu
+ * - {@link #menuDisabled}: Disables the column header menu
+ * - {@link #draggable}: Specifies whether the column header can be reordered by dragging
+ * - {@link #groupable}: Specifies whether the grid can be grouped by the column dataIndex. See also {@link Ext.grid.feature.Grouping}
+ *
+ * # Data Options
+ *
+ * - {@link #dataIndex}: The dataIndex is the field in the underlying {@link Ext.data.Store} to use as the value for the column.
+ * - {@link #renderer}: Allows the underlying store value to be transformed before being displayed in the grid
+ */
+Ext.define('Ext.grid.column.Column', {
+ extend: 'Ext.grid.header.Container',
+ alias: 'widget.gridcolumn',
+ requires: ['Ext.util.KeyNav'],
+ alternateClassName: 'Ext.grid.Column',
+
+ baseCls: Ext.baseCSSPrefix + 'column-header ' + Ext.baseCSSPrefix + 'unselectable',
+
+ // Not the standard, automatically applied overCls because we must filter out overs of child headers.
+ hoverCls: Ext.baseCSSPrefix + 'column-header-over',
+
+ handleWidth: 5,
+
+ sortState: null,
+
+ possibleSortStates: ['ASC', 'DESC'],
+
+ renderTpl:
+ '<div id="{id}-titleContainer" class="' + Ext.baseCSSPrefix + 'column-header-inner">' +
+ '<span id="{id}-textEl" class="' + Ext.baseCSSPrefix + 'column-header-text">' +
+ '{text}' +
+ '</span>' +
+ '<tpl if="!values.menuDisabled">'+
+ '<div id="{id}-triggerEl" class="' + Ext.baseCSSPrefix + 'column-header-trigger"></div>'+
+ '</tpl>' +
+ '</div>',
+
+<span id='Ext-grid-column-Column-cfg-columns'> /**
+</span> * @cfg {Object[]} columns
+ * An optional array of sub-column definitions. This column becomes a group, and houses the columns defined in the
+ * `columns` config.
+ *
+ * Group columns may not be sortable. But they may be hideable and moveable. And you may move headers into and out
+ * of a group. Note that if all sub columns are dragged out of a group, the group is destroyed.
+ */
+
+<span id='Ext-grid-column-Column-cfg-dataIndex'> /**
+</span> * @cfg {String} dataIndex
+ * The name of the field in the grid's {@link Ext.data.Store}'s {@link Ext.data.Model} definition from
+ * which to draw the column's value. **Required.**
+ */
+ dataIndex: null,
+
+<span id='Ext-grid-column-Column-cfg-text'> /**
+</span> * @cfg {String} text
+ * The header text to be used as innerHTML (html tags are accepted) to display in the Grid.
+ * **Note**: to have a clickable header with no text displayed you can use the default of `&#160;` aka `&nbsp;`.
+ */
+ text: '&#160;',
+
+<span id='Ext-grid-column-Column-cfg-sortable'> /**
+</span> * @cfg {Boolean} sortable
+ * False to disable sorting of this column. Whether local/remote sorting is used is specified in
+ * `{@link Ext.data.Store#remoteSort}`. Defaults to true.
+ */
+ sortable: true,
+
+<span id='Ext-grid-column-Column-cfg-groupable'> /**
+</span> * @cfg {Boolean} groupable
+ * If the grid uses a {@link Ext.grid.feature.Grouping}, this option may be used to disable the header menu
+ * item to group by the column selected. By default, the header menu group option is enabled. Set to false to
+ * disable (but still show) the group option in the header menu for the column.
+ */
+
+<span id='Ext-grid-column-Column-cfg-fixed'> /**
+</span> * @cfg {Boolean} fixed
+ * @deprecated.
+ * True to prevent the column from being resizable.
+ */
+
+<span id='Ext-grid-column-Column-cfg-resizable'> /**
+</span> * @cfg {Boolean} resizable
+ * Set to <code>false</code> to prevent the column from being resizable. Defaults to <code>true</code>
+ */
+
+<span id='Ext-grid-column-Column-cfg-hideable'> /**
+</span> * @cfg {Boolean} hideable
+ * False to prevent the user from hiding this column. Defaults to true.
+ */
+ hideable: true,
+
+<span id='Ext-grid-column-Column-cfg-menuDisabled'> /**
+</span> * @cfg {Boolean} menuDisabled
+ * True to disable the column header menu containing sort/hide options. Defaults to false.
+ */
+ menuDisabled: false,
+
+<span id='Ext-grid-column-Column-cfg-renderer'> /**
+</span> * @cfg {Function} renderer
+ * A renderer is an 'interceptor' method which can be used transform data (value, appearance, etc.)
+ * before it is rendered. Example:
+ *
+ * {
+ * renderer: function(value){
+ * if (value === 1) {
+ * return '1 person';
+ * }
+ * return value + ' people';
+ * }
+ * }
+ *
+ * @cfg {Object} renderer.value The data value for the current cell
+ * @cfg {Object} renderer.metaData A collection of metadata about the current cell; can be used or modified
+ * by the renderer. Recognized properties are: tdCls, tdAttr, and style.
+ * @cfg {Ext.data.Model} renderer.record The record for the current row
+ * @cfg {Number} renderer.rowIndex The index of the current row
+ * @cfg {Number} renderer.colIndex The index of the current column
+ * @cfg {Ext.data.Store} renderer.store The data store
+ * @cfg {Ext.view.View} renderer.view The current view
+ * @cfg {String} renderer.return The HTML string to be rendered.
+ */
+ renderer: false,
+
+<span id='Ext-grid-column-Column-cfg-align'> /**
+</span> * @cfg {String} align
+ * Sets the alignment of the header and rendered columns. Defaults to 'left'.
+ */
+ align: 'left',
+
+<span id='Ext-grid-column-Column-cfg-draggable'> /**
+</span> * @cfg {Boolean} draggable
+ * False to disable drag-drop reordering of this column. Defaults to true.
+ */
+ draggable: true,
+
+ // Header does not use the typical ComponentDraggable class and therefore we
+ // override this with an emptyFn. It is controlled at the HeaderDragZone.
+ initDraggable: Ext.emptyFn,
+
+<span id='Ext-grid-column-Column-cfg-tdCls'> /**
+</span> * @cfg {String} tdCls
+ * A CSS class names to apply to the table cells for this column.
+ */
+
+<span id='Ext-grid-column-Column-cfg-editor'> /**
+</span> * @cfg {Object/String} editor
+ * An optional xtype or config object for a {@link Ext.form.field.Field Field} to use for editing.
+ * Only applicable if the grid is using an {@link Ext.grid.plugin.Editing Editing} plugin.
+ */
+
+<span id='Ext-grid-column-Column-cfg-field'> /**
+</span> * @cfg {Object/String} field
+ * Alias for {@link #editor}.
+ * @deprecated 4.0.5 Use {@link #editor} instead.
+ */
+
+<span id='Ext-grid-column-Column-property-triggerEl'> /**
+</span> * @property {Ext.Element} triggerEl
+ * Element that acts as button for column header dropdown menu.
+ */
+
+<span id='Ext-grid-column-Column-property-textEl'> /**
+</span> * @property {Ext.Element} textEl
+ * Element that contains the text in column header.
+ */
+
+<span id='Ext-grid-column-Column-property-isHeader'> /**
+</span> * @private
+ * Set in this class to identify, at runtime, instances which are not instances of the
+ * HeaderContainer base class, but are in fact, the subclass: Header.
+ */
+ isHeader: true,
+
+ initComponent: function() {
+ var me = this,
+ i,
+ len,
+ item;
+
+ if (Ext.isDefined(me.header)) {
+ me.text = me.header;
+ delete me.header;
+ }
+
+ // Flexed Headers need to have a minWidth defined so that they can never be squeezed out of existence by the
+ // HeaderContainer's specialized Box layout, the ColumnLayout. The ColumnLayout's overridden calculateChildboxes
+ // method extends the available layout space to accommodate the "desiredWidth" of all the columns.
+ if (me.flex) {
+ me.minWidth = me.minWidth || Ext.grid.plugin.HeaderResizer.prototype.minColWidth;
+ }
+ // Non-flexed Headers may never be squeezed in the event of a shortfall so
+ // always set their minWidth to their current width.
+ else {
+ me.minWidth = me.width;
+ }
+
+ if (!me.triStateSort) {
+ me.possibleSortStates.length = 2;
+ }
+
+ // A group header; It contains items which are themselves Headers
+ if (Ext.isDefined(me.columns)) {
+ me.isGroupHeader = true;
+
+ //<debug>
+ if (me.dataIndex) {
+ Ext.Error.raise('Ext.grid.column.Column: Group header may not accept a dataIndex');
+ }
+ if ((me.width && me.width !== Ext.grid.header.Container.prototype.defaultWidth) || me.flex) {
+ Ext.Error.raise('Ext.grid.column.Column: Group header does not support setting explicit widths or flexs. The group header width is calculated by the sum of its children.');
+ }
+ //</debug>
+
+ // The headers become child items
+ me.items = me.columns;
+ delete me.columns;
+ delete me.flex;
+ me.width = 0;
+
+ // Acquire initial width from sub headers
+ for (i = 0, len = me.items.length; i < len; i++) {
+ item = me.items[i];
+ if (!item.hidden) {
+ me.width += item.width || Ext.grid.header.Container.prototype.defaultWidth;
+ }
+ //<debug>
+ if (item.flex) {
+ Ext.Error.raise('Ext.grid.column.Column: items of a grouped header do not support flexed values. Each item must explicitly define its width.');
+ }
+ //</debug>
+ }
+ me.minWidth = me.width;
+
+ me.cls = (me.cls||'') + ' ' + Ext.baseCSSPrefix + 'group-header';
+ me.sortable = false;
+ me.resizable = false;
+ me.align = 'center';
+ }
+
+ me.addChildEls('titleContainer', 'triggerEl', 'textEl');
+
+ // Initialize as a HeaderContainer
+ me.callParent(arguments);
+ },
+
+ onAdd: function(childHeader) {
+ childHeader.isSubHeader = true;
+ childHeader.addCls(Ext.baseCSSPrefix + 'group-sub-header');
+ this.callParent(arguments);
+ },
+
+ onRemove: function(childHeader) {
+ childHeader.isSubHeader = false;
+ childHeader.removeCls(Ext.baseCSSPrefix + 'group-sub-header');
+ this.callParent(arguments);
+ },
+
+ initRenderData: function() {
+ var me = this;
+
+ Ext.applyIf(me.renderData, {
+ text: me.text,
+ menuDisabled: me.menuDisabled
+ });
+ return me.callParent(arguments);
+ },
+
+ applyColumnState: function (state) {
+ var me = this,
+ defined = Ext.isDefined;
+
+ // apply any columns
+ me.applyColumnsState(state.columns);
+
+ // Only state properties which were saved should be restored.
+ // (Only user-changed properties were saved by getState)
+ if (defined(state.hidden)) {
+ me.hidden = state.hidden;
+ }
+ if (defined(state.locked)) {
+ me.locked = state.locked;
+ }
+ if (defined(state.sortable)) {
+ me.sortable = state.sortable;
+ }
+ if (defined(state.width)) {
+ delete me.flex;
+ me.width = state.width;
+ } else if (defined(state.flex)) {
+ delete me.width;
+ me.flex = state.flex;
+ }
+ },
+
+ getColumnState: function () {
+ var me = this,
+ columns = [],
+ state = {
+ id: me.headerId
+ };
+
+ me.savePropsToState(['hidden', 'sortable', 'locked', 'flex', 'width'], state);
+
+ if (me.isGroupHeader) {
+ me.items.each(function(column){
+ columns.push(column.getColumnState());
+ });
+ if (columns.length) {
+ state.columns = columns;
+ }
+ } else if (me.isSubHeader && me.ownerCt.hidden) {
+ // don't set hidden on the children so they can auto height
+ delete me.hidden;
+ }
+
+ if ('width' in state) {
+ delete state.flex; // width wins
+ }
+ return state;
+ },
+
+<span id='Ext-grid-column-Column-method-setText'> /**
+</span> * Sets the header text for this Column.
+ * @param {String} text The header to display on this Column.
+ */
+ setText: function(text) {
+ this.text = text;
+ if (this.rendered) {
+ this.textEl.update(text);
+ }
+ },
+
+ // Find the topmost HeaderContainer: An ancestor which is NOT a Header.
+ // Group Headers are themselves HeaderContainers
+ getOwnerHeaderCt: function() {
+ return this.up(':not([isHeader])');
+ },
+
+<span id='Ext-grid-column-Column-method-getIndex'> /**
+</span> * Returns the true grid column index associated with this column only if this column is a base level Column. If it
+ * is a group column, it returns `false`.
+ * @return {Number}
+ */
+ getIndex: function() {
+ return this.isGroupColumn ? false : this.getOwnerHeaderCt().getHeaderIndex(this);
+ },
+
+ onRender: function() {
+ var me = this,
+ grid = me.up('tablepanel');
+
+ // Disable the menu if there's nothing to show in the menu, ie:
+ // Column cannot be sorted, grouped or locked, and there are no grid columns which may be hidden
+ if (grid && (!me.sortable || grid.sortableColumns === false) && !me.groupable && !me.lockable && (grid.enableColumnHide === false || !me.getOwnerHeaderCt().getHideableColumns().length)) {
+ me.menuDisabled = true;
+ }
+ me.callParent(arguments);
+ },
+
+ afterRender: function() {
+ var me = this,
+ el = me.el;
+
+ me.callParent(arguments);
+
+ el.addCls(Ext.baseCSSPrefix + 'column-header-align-' + me.align).addClsOnOver(me.overCls);
+
+ me.mon(el, {
+ click: me.onElClick,
+ dblclick: me.onElDblClick,
+ scope: me
+ });
+
+ // BrowserBug: Ie8 Strict Mode, this will break the focus for this browser,
+ // must be fixed when focus management will be implemented.
+ if (!Ext.isIE8 || !Ext.isStrict) {
+ me.mon(me.getFocusEl(), {
+ focus: me.onTitleMouseOver,
+ blur: me.onTitleMouseOut,
+ scope: me
+ });
+ }
+
+ me.mon(me.titleContainer, {
+ mouseenter: me.onTitleMouseOver,
+ mouseleave: me.onTitleMouseOut,
+ scope: me
+ });
+
+ me.keyNav = Ext.create('Ext.util.KeyNav', el, {
+ enter: me.onEnterKey,
+ down: me.onDownKey,
+ scope: me
+ });
+ },
+
+<span id='Ext-grid-column-Column-method-setWidth'> /**
+</span> * Sets the width of this Column.
+ * @param {Number} width New width.
+ */
+ setWidth: function(width, /* private - used internally */ doLayout) {
+ var me = this,
+ headerCt = me.ownerCt,
+ siblings,
+ len, i,
+ oldWidth = me.getWidth(),
+ groupWidth = 0,
+ sibling;
+
+ if (width !== oldWidth) {
+ me.oldWidth = oldWidth;
+
+ // Non-flexed Headers may never be squeezed in the event of a shortfall so
+ // always set the minWidth to their current width.
+ me.minWidth = me.width = width;
+
+ // Bubble size changes upwards to group headers
+ if (headerCt.isGroupHeader) {
+ siblings = headerCt.items.items;
+ len = siblings.length;
+
+ for (i = 0; i < len; i++) {
+ sibling = siblings[i];
+ if (!sibling.hidden) {
+ groupWidth += (sibling === me) ? width : sibling.getWidth();
+ }
+ }
+ headerCt.setWidth(groupWidth, doLayout);
+ } else if (doLayout !== false) {
+ // Allow the owning Container to perform the sizing
+ headerCt.doLayout();
+ }
+ }
+ },
+
+ afterComponentLayout: function(width, height) {
+ var me = this,
+ ownerHeaderCt = this.getOwnerHeaderCt();
+
+ me.callParent(arguments);
+
+ // Only changes at the base level inform the grid's HeaderContainer which will update the View
+ // Skip this if the width is null or undefined which will be the Box layout's initial pass through the child Components
+ // Skip this if it's the initial size setting in which case there is no ownerheaderCt yet - that is set afterRender
+ if (width && !me.isGroupHeader && ownerHeaderCt) {
+ ownerHeaderCt.onHeaderResize(me, width, true);
+ }
+ if (me.oldWidth && (width !== me.oldWidth)) {
+ ownerHeaderCt.fireEvent('columnresize', ownerHeaderCt, this, width);
+ }
+ delete me.oldWidth;
+ },
+
+ // private
+ // After the container has laid out and stretched, it calls this to correctly pad the inner to center the text vertically
+ // Total available header height must be passed to enable padding for inner elements to be calculated.
+ setPadding: function(headerHeight) {
+ var me = this,
+ lineHeight = Ext.util.TextMetrics.measure(me.textEl.dom, me.text).height;
+
+ // Top title containing element must stretch to match height of sibling group headers
+ if (!me.isGroupHeader) {
+ if (me.titleContainer.getHeight() < headerHeight) {
+ me.titleContainer.dom.style.height = headerHeight + 'px';
+ }
+ }
+ headerHeight = me.titleContainer.getViewSize().height;
+
+ // Vertically center the header text in potentially vertically stretched header
+ if (lineHeight) {
+ me.titleContainer.setStyle({
+ paddingTop: Math.max(((headerHeight - lineHeight) / 2), 0) + 'px'
+ });
+ }
+
+ // Only IE needs this
+ if (Ext.isIE && me.triggerEl) {
+ me.triggerEl.setHeight(headerHeight);
+ }
+ },
+
+ onDestroy: function() {
+ var me = this;
+ // force destroy on the textEl, IE reports a leak
+ Ext.destroy(me.textEl, me.keyNav);
+ delete me.keyNav;
+ me.callParent(arguments);
+ },
+
+ onTitleMouseOver: function() {
+ this.titleContainer.addCls(this.hoverCls);
+ },
+
+ onTitleMouseOut: function() {
+ this.titleContainer.removeCls(this.hoverCls);
+ },
+
+ onDownKey: function(e) {
+ if (this.triggerEl) {
+ this.onElClick(e, this.triggerEl.dom || this.el.dom);
+ }
+ },
+
+ onEnterKey: function(e) {
+ this.onElClick(e, this.el.dom);
+ },
+
+<span id='Ext-grid-column-Column-method-onElDblClick'> /**
+</span> * @private
+ * Double click
+ * @param e
+ * @param t
+ */
+ onElDblClick: function(e, t) {
+ var me = this,
+ ownerCt = me.ownerCt;
+ if (ownerCt && Ext.Array.indexOf(ownerCt.items, me) !== 0 && me.isOnLeftEdge(e) ) {
+ ownerCt.expandToFit(me.previousSibling('gridcolumn'));
+ }
+ },
+
+ onElClick: function(e, t) {
+
+ // The grid's docked HeaderContainer.
+ var me = this,
+ ownerHeaderCt = me.getOwnerHeaderCt();
+
+ if (ownerHeaderCt && !ownerHeaderCt.ddLock) {
+ // Firefox doesn't check the current target in a within check.
+ // Therefore we check the target directly and then within (ancestors)
+ if (me.triggerEl && (e.target === me.triggerEl.dom || t === me.triggerEl.dom || e.within(me.triggerEl))) {
+ ownerHeaderCt.onHeaderTriggerClick(me, e, t);
+ // if its not on the left hand edge, sort
+ } else if (e.getKey() || (!me.isOnLeftEdge(e) && !me.isOnRightEdge(e))) {
+ me.toggleSortState();
+ ownerHeaderCt.onHeaderClick(me, e, t);
+ }
+ }
+ },
+
+<span id='Ext-grid-column-Column-method-processEvent'> /**
+</span> * @private
+ * Process UI events from the view. The owning TablePanel calls this method, relaying events from the TableView
+ * @param {String} type Event type, eg 'click'
+ * @param {Ext.view.Table} view TableView Component
+ * @param {HTMLElement} cell Cell HtmlElement the event took place within
+ * @param {Number} recordIndex Index of the associated Store Model (-1 if none)
+ * @param {Number} cellIndex Cell index within the row
+ * @param {Ext.EventObject} e Original event
+ */
+ processEvent: function(type, view, cell, recordIndex, cellIndex, e) {
+ return this.fireEvent.apply(this, arguments);
+ },
+
+ toggleSortState: function() {
+ var me = this,
+ idx,
+ nextIdx;
+
+ if (me.sortable) {
+ idx = Ext.Array.indexOf(me.possibleSortStates, me.sortState);
+
+ nextIdx = (idx + 1) % me.possibleSortStates.length;
+ me.setSortState(me.possibleSortStates[nextIdx]);
+ }
+ },
+
+ doSort: function(state) {
+ var ds = this.up('tablepanel').store;
+ ds.sort({
+ property: this.getSortParam(),
+ direction: state
+ });
+ },
+
+<span id='Ext-grid-column-Column-method-getSortParam'> /**
+</span> * Returns the parameter to sort upon when sorting this header. By default this returns the dataIndex and will not
+ * need to be overriden in most cases.
+ * @return {String}
+ */
+ getSortParam: function() {
+ return this.dataIndex;
+ },
+
+ //setSortState: function(state, updateUI) {
+ //setSortState: function(state, doSort) {
+ setSortState: function(state, skipClear, initial) {
+ var me = this,
+ colSortClsPrefix = Ext.baseCSSPrefix + 'column-header-sort-',
+ ascCls = colSortClsPrefix + 'ASC',
+ descCls = colSortClsPrefix + 'DESC',
+ nullCls = colSortClsPrefix + 'null',
+ ownerHeaderCt = me.getOwnerHeaderCt(),
+ oldSortState = me.sortState;
+
+ if (oldSortState !== state && me.getSortParam()) {
+ me.addCls(colSortClsPrefix + state);
+ // don't trigger a sort on the first time, we just want to update the UI
+ if (state && !initial) {
+ me.doSort(state);
+ }
+ switch (state) {
+ case 'DESC':
+ me.removeCls([ascCls, nullCls]);
+ break;
+ case 'ASC':
+ me.removeCls([descCls, nullCls]);
+ break;
+ case null:
+ me.removeCls([ascCls, descCls]);
+ break;
+ }
+ if (ownerHeaderCt && !me.triStateSort && !skipClear) {
+ ownerHeaderCt.clearOtherSortStates(me);
+ }
+ me.sortState = state;
+ ownerHeaderCt.fireEvent('sortchange', ownerHeaderCt, me, state);
+ }
+ },
+
+ hide: function() {
+ var me = this,
+ items,
+ len, i,
+ lb,
+ newWidth = 0,
+ ownerHeaderCt = me.getOwnerHeaderCt();
+
+ // Hiding means setting to zero width, so cache the width
+ me.oldWidth = me.getWidth();
+
+ // Hiding a group header hides itself, and then informs the HeaderContainer about its sub headers (Suppressing header layout)
+ if (me.isGroupHeader) {
+ items = me.items.items;
+ me.callParent(arguments);
+ ownerHeaderCt.onHeaderHide(me);
+ for (i = 0, len = items.length; i < len; i++) {
+ items[i].hidden = true;
+ ownerHeaderCt.onHeaderHide(items[i], true);
+ }
+ return;
+ }
+
+ // TODO: Work with Jamie to produce a scheme where we can show/hide/resize without triggering a layout cascade
+ lb = me.ownerCt.componentLayout.layoutBusy;
+ me.ownerCt.componentLayout.layoutBusy = true;
+ me.callParent(arguments);
+ me.ownerCt.componentLayout.layoutBusy = lb;
+
+ // Notify owning HeaderContainer
+ ownerHeaderCt.onHeaderHide(me);
+
+ if (me.ownerCt.isGroupHeader) {
+ // If we've just hidden the last header in a group, then hide the group
+ items = me.ownerCt.query('>:not([hidden])');
+ if (!items.length) {
+ me.ownerCt.hide();
+ }
+ // Size the group down to accommodate fewer sub headers
+ else {
+ for (i = 0, len = items.length; i < len; i++) {
+ newWidth += items[i].getWidth();
+ }
+ me.ownerCt.minWidth = newWidth;
+ me.ownerCt.setWidth(newWidth);
+ }
+ }
+ },
+
+ show: function() {
+ var me = this,
+ ownerCt = me.ownerCt,
+ ownerCtCompLayout = ownerCt.componentLayout,
+ ownerCtCompLayoutBusy = ownerCtCompLayout.layoutBusy,
+ ownerCtLayout = ownerCt.layout,
+ ownerCtLayoutBusy = ownerCtLayout.layoutBusy,
+ items,
+ len, i,
+ item,
+ newWidth = 0;
+
+ // TODO: Work with Jamie to produce a scheme where we can show/hide/resize without triggering a layout cascade
+
+ // Suspend our owner's layouts (both component and container):
+ ownerCtCompLayout.layoutBusy = ownerCtLayout.layoutBusy = true;
+
+ me.callParent(arguments);
+
+ ownerCtCompLayout.layoutBusy = ownerCtCompLayoutBusy;
+ ownerCtLayout.layoutBusy = ownerCtLayoutBusy;
+
+ // If a sub header, ensure that the group header is visible
+ if (me.isSubHeader) {
+ if (!ownerCt.isVisible()) {
+ ownerCt.show();
+ }
+ }
+
+ // If we've just shown a group with all its sub headers hidden, then show all its sub headers
+ if (me.isGroupHeader && !me.query(':not([hidden])').length) {
+ items = me.query('>*');
+ for (i = 0, len = items.length; i < len; i++) {
+ item = items[i];
+ item.preventLayout = true;
+ item.show();
+ newWidth += item.getWidth();
+ delete item.preventLayout;
+ }
+ me.setWidth(newWidth);
+ }
+
+ // Resize the owning group to accommodate
+ if (ownerCt.isGroupHeader && me.preventLayout !== true) {
+ items = ownerCt.query('>:not([hidden])');
+ for (i = 0, len = items.length; i < len; i++) {
+ newWidth += items[i].getWidth();
+ }
+ ownerCt.minWidth = newWidth;
+ ownerCt.setWidth(newWidth);
+ }
+
+ // Notify owning HeaderContainer
+ ownerCt = me.getOwnerHeaderCt();
+ if (ownerCt) {
+ ownerCt.onHeaderShow(me, me.preventLayout);
+ }
+ },
+
+ getDesiredWidth: function() {
+ var me = this;
+ if (me.rendered && me.componentLayout && me.componentLayout.lastComponentSize) {
+ // headers always have either a width or a flex
+ // because HeaderContainer sets a defaults width
+ // therefore we can ignore the natural width
+ // we use the componentLayout's tracked width so that
+ // we can calculate the desired width when rendered
+ // but not visible because its being obscured by a layout
+ return me.componentLayout.lastComponentSize.width;
+ // Flexed but yet to be rendered this could be the case
+ // where a HeaderContainer and Headers are simply used as data
+ // structures and not rendered.
+ }
+ else if (me.flex) {
+ // this is going to be wrong, the defaultWidth
+ return me.width;
+ }
+ else {
+ return me.width;
+ }
+ },
+
+ getCellSelector: function() {
+ return '.' + Ext.baseCSSPrefix + 'grid-cell-' + this.getItemId();
+ },
+
+ getCellInnerSelector: function() {
+ return this.getCellSelector() + ' .' + Ext.baseCSSPrefix + 'grid-cell-inner';
+ },
+
+ isOnLeftEdge: function(e) {
+ return (e.getXY()[0] - this.el.getLeft() <= this.handleWidth);
+ },
+
+ isOnRightEdge: function(e) {
+ return (this.el.getRight() - e.getXY()[0] <= this.handleWidth);
+ }
+
+ // intentionally omit getEditor and setEditor definitions bc we applyIf into columns
+ // when the editing plugin is injected
+
+<span id='Ext-grid-column-Column-method-getEditor'> /**
+</span> * @method getEditor
+ * Retrieves the editing field for editing associated with this header. Returns false if there is no field
+ * associated with the Header the method will return false. If the field has not been instantiated it will be
+ * created. Note: These methods only has an implementation if a Editing plugin has been enabled on the grid.
+ * @param {Object} record The {@link Ext.data.Model Model} instance being edited.
+ * @param {Object} defaultField An object representing a default field to be created
+ * @return {Ext.form.field.Field} field
+ */
+<span id='Ext-grid-column-Column-method-setEditor'> /**
+</span> * @method setEditor
+ * Sets the form field to be used for editing. Note: This method only has an implementation if an Editing plugin has
+ * been enabled on the grid.
+ * @param {Object} field An object representing a field to be created. If no xtype is specified a 'textfield' is
+ * assumed.
+ */
+});
+</pre>
+</body>
+</html>
git.ithinksw.org / extjs.git / blobdiff