3 * Copyright(c) 2006-2009 Ext JS, LLC
5 * http://www.extjs.com/license
8 * @class Ext.grid.Column
\r
9 * <p>This class encapsulates column configuration data to be used in the initialization of a
\r
10 * {@link Ext.grid.ColumnModel ColumnModel}.</p>
\r
11 * <p>While subclasses are provided to render data in different ways, this class renders a passed
\r
12 * data field unchanged and is usually used for textual columns.</p>
\r
14 Ext.grid.Column = function(config){
\r
15 Ext.apply(this, config);
\r
17 if(typeof this.renderer == 'string'){
\r
18 this.renderer = Ext.util.Format[this.renderer];
\r
19 } else if(Ext.isObject(this.renderer)){
\r
20 this.scope = this.renderer.scope;
\r
21 this.renderer = this.renderer.fn;
\r
23 this.renderer = this.renderer.createDelegate(this.scope || config);
\r
25 if(this.id === undefined){
\r
26 this.id = ++Ext.grid.Column.AUTO_ID;
\r
29 this.editor = Ext.create(this.editor, 'textfield');
\r
33 Ext.grid.Column.AUTO_ID = 0;
\r
35 Ext.grid.Column.prototype = {
\r
37 * @cfg {Boolean} editable Optional. Defaults to <tt>true</tt>, enabling the configured
\r
38 * <tt>{@link #editor}</tt>. Set to <tt>false</tt> to initially disable editing on this column.
\r
39 * The initial configuration may be dynamically altered using
\r
40 * {@link Ext.grid.ColumnModel}.{@link Ext.grid.ColumnModel#setEditable setEditable()}.
\r
43 * @cfg {String} id Optional. A name which identifies this column (defaults to the column's initial
\r
44 * ordinal position.) The <tt>id</tt> is used to create a CSS <b>class</b> name which is applied to all
\r
45 * table cells (including headers) in that column (in this context the <tt>id</tt> does not need to be
\r
46 * unique). The class name takes the form of <pre>x-grid3-td-<b>id</b></pre>
\r
47 * Header cells will also receive this class name, but will also have the class <pre>x-grid3-hd</pre>
\r
48 * So, to target header cells, use CSS selectors such as:<pre>.x-grid3-hd-row .x-grid3-td-<b>id</b></pre>
\r
49 * The {@link Ext.grid.GridPanel#autoExpandColumn} grid config option references the column via this
\r
50 * unique identifier.
\r
53 * @cfg {String} header Optional. The header text to be used as innerHTML
\r
54 * (html tags are accepted) to display in the Grid view. <b>Note</b>: to
\r
55 * have a clickable header with no text displayed use <tt>' '</tt>.
\r
58 * @cfg {Boolean} groupable Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
\r
59 * may be used to disable the header menu item to group by the column selected. Defaults to <tt>true</tt>,
\r
60 * which enables the header menu group option. Set to <tt>false</tt> to disable (but still show) the
\r
61 * group option in the header menu for the column. See also <code>{@link #groupName}</code>.
\r
64 * @cfg {String} groupName Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
\r
65 * may be used to specify the text with which to prefix the group field value in the group header line.
\r
66 * See also {@link #groupRenderer} and
\r
67 * {@link Ext.grid.GroupingView}.{@link Ext.grid.GroupingView#showGroupName showGroupName}.
\r
70 * @cfg {Function} groupRenderer <p>Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
\r
71 * may be used to specify the function used to format the grouping field value for display in the group
\r
72 * {@link #groupName header}. If a <tt><b>groupRenderer</b></tt> is not specified, the configured
\r
73 * <tt><b>{@link #renderer}</b></tt> will be called; if a <tt><b>{@link #renderer}</b></tt> is also not specified
\r
74 * the new value of the group field will be used.</p>
\r
75 * <p>The called function (either the <tt><b>groupRenderer</b></tt> or <tt><b>{@link #renderer}</b></tt>) will be
\r
76 * passed the following parameters:
\r
77 * <div class="mdetail-params"><ul>
\r
78 * <li><b>v</b> : Object<p class="sub-desc">The new value of the group field.</p></li>
\r
79 * <li><b>unused</b> : undefined<p class="sub-desc">Unused parameter.</p></li>
\r
80 * <li><b>r</b> : Ext.data.Record<p class="sub-desc">The Record providing the data
\r
81 * for the row which caused group change.</p></li>
\r
82 * <li><b>rowIndex</b> : Number<p class="sub-desc">The row index of the Record which caused group change.</p></li>
\r
83 * <li><b>colIndex</b> : Number<p class="sub-desc">The column index of the group field.</p></li>
\r
84 * <li><b>ds</b> : Ext.data.Store<p class="sub-desc">The Store which is providing the data Model.</p></li>
\r
86 * <p>The function should return a string value.</p>
\r
89 * @cfg {String} emptyGroupText Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
\r
90 * may be used to specify the text to display when there is an empty group value. Defaults to the
\r
91 * {@link Ext.grid.GroupingView}.{@link Ext.grid.GroupingView#emptyGroupText emptyGroupText}.
\r
94 * @cfg {String} dataIndex <p><b>Required</b>. The name of the field in the
\r
95 * grid's {@link Ext.data.Store}'s {@link Ext.data.Record} definition from
\r
96 * which to draw the column's value.</p>
\r
99 * @cfg {Number} width
\r
100 * Optional. The initial width in pixels of the column.
\r
101 * The width of each column can also be affected if any of the following are configured:
\r
102 * <div class="mdetail-params"><ul>
\r
103 * <li>{@link Ext.grid.GridPanel}.<tt>{@link Ext.grid.GridPanel#autoExpandColumn autoExpandColumn}</tt></li>
\r
104 * <li>{@link Ext.grid.GridView}.<tt>{@link Ext.grid.GridView#forceFit forceFit}</tt>
\r
105 * <div class="sub-desc">
\r
106 * <p>By specifying <tt>forceFit:true</tt>, {@link #fixed non-fixed width} columns will be
\r
107 * re-proportioned (based on the relative initial widths) to fill the width of the grid so
\r
108 * that no horizontal scrollbar is shown.</p>
\r
110 * <li>{@link Ext.grid.GridView}.<tt>{@link Ext.grid.GridView#autoFill autoFill}</tt></li>
\r
111 * <li>{@link Ext.grid.GridPanel}.<tt>{@link Ext.grid.GridPanel#minColumnWidth minColumnWidth}</tt></li>
\r
112 * <br><p><b>Note</b>: when the width of each column is determined, a space on the right side
\r
113 * is reserved for the vertical scrollbar. The
\r
114 * {@link Ext.grid.GridView}.<tt>{@link Ext.grid.GridView#scrollOffset scrollOffset}</tt>
\r
115 * can be modified to reduce or eliminate the reserved offset.</p>
\r
118 * @cfg {Boolean} sortable Optional. <tt>true</tt> if sorting is to be allowed on this column.
\r
119 * Defaults to the value of the {@link #defaultSortable} property.
\r
120 * Whether local/remote sorting is used is specified in {@link Ext.data.Store#remoteSort}.
\r
123 * @cfg {Boolean} fixed Optional. <tt>true</tt> if the column width cannot be changed. Defaults to <tt>false</tt>.
\r
126 * @cfg {Boolean} resizable Optional. <tt>false</tt> to disable column resizing. Defaults to <tt>true</tt>.
\r
129 * @cfg {Boolean} menuDisabled Optional. <tt>true</tt> to disable the column menu. Defaults to <tt>false</tt>.
\r
132 * @cfg {Boolean} hidden Optional. <tt>true</tt> to hide the column. Defaults to <tt>false</tt>.
\r
135 * @cfg {String} tooltip Optional. A text string to use as the column header's tooltip. If Quicktips
\r
136 * are enabled, this value will be used as the text of the quick tip, otherwise it will be set as the
\r
137 * header's HTML title attribute. Defaults to ''.
\r
140 * @cfg {Mixed} renderer
\r
141 * <p>For an alternative to specifying a renderer see <code>{@link #xtype}</code></p>
\r
142 * <p>Optional. A renderer is an 'interceptor' method which can be used transform data (value,
\r
143 * appearance, etc.) before it is rendered). This may be specified in either of three ways:
\r
144 * <div class="mdetail-params"><ul>
\r
145 * <li>A renderer function used to return HTML markup for a cell given the cell's data value.</li>
\r
146 * <li>A string which references a property name of the {@link Ext.util.Format} class which
\r
147 * provides a renderer function.</li>
\r
148 * <li>An object specifying both the renderer function, and its execution scope (<tt><b>this</b></tt>
\r
149 * reference) e.g.:<pre style="margin-left:1.2em"><code>
\r
151 fn: this.gridRenderer,
\r
154 </code></pre></li></ul></div>
\r
155 * If not specified, the default renderer uses the raw data value.</p>
\r
156 * <p>For information about the renderer function (passed parameters, etc.), see
\r
157 * {@link Ext.grid.ColumnModel#setRenderer}. An example of specifying renderer function inline:</p><pre><code>
\r
158 var companyColumn = {
\r
159 header: 'Company Name',
\r
160 dataIndex: 'company',
\r
161 renderer: function(value, metaData, record, rowIndex, colIndex, store) {
\r
162 // provide the logic depending on business rules
\r
163 // name of your own choosing to manipulate the cell depending upon
\r
164 // the data in the underlying Record object.
\r
165 if (value == 'whatever') {
\r
166 //metaData.css : String : A CSS class name to add to the TD element of the cell.
\r
167 //metaData.attr : String : An html attribute definition string to apply to
\r
168 // the data container element within the table
\r
169 // cell (e.g. 'style="color:red;"').
\r
170 metaData.css = 'name-of-css-class-you-will-define';
\r
176 * See also {@link #scope}.
\r
179 * @cfg {String} xtype Optional. A String which references a predefined {@link Ext.grid.Column} subclass
\r
180 * type which is preconfigured with an appropriate <code>{@link #renderer}</code> to be easily
\r
181 * configured into a ColumnModel. The predefined {@link Ext.grid.Column} subclass types are:
\r
182 * <div class="mdetail-params"><ul>
\r
183 * <li><b><tt>gridcolumn</tt></b> : {@link Ext.grid.Column} (<b>Default</b>)<p class="sub-desc"></p></li>
\r
184 * <li><b><tt>booleancolumn</tt></b> : {@link Ext.grid.BooleanColumn}<p class="sub-desc"></p></li>
\r
185 * <li><b><tt>numbercolumn</tt></b> : {@link Ext.grid.NumberColumn}<p class="sub-desc"></p></li>
\r
186 * <li><b><tt>datecolumn</tt></b> : {@link Ext.grid.DateColumn}<p class="sub-desc"></p></li>
\r
187 * <li><b><tt>templatecolumn</tt></b> : {@link Ext.grid.TemplateColumn}<p class="sub-desc"></p></li>
\r
189 * <p>Configuration properties for the specified <code>xtype</code> may be specified with
\r
190 * the Column configuration properties, for example:</p>
\r
192 var grid = new Ext.grid.GridPanel({
\r
195 header: 'Last Updated',
\r
196 dataIndex: 'lastChange',
\r
199 //renderer: Ext.util.Format.dateRenderer('m/d/Y'),
\r
200 xtype: 'datecolumn', // use xtype instead of renderer
\r
201 format: 'M/d/Y' // configuration property for {@link Ext.grid.DateColumn}
\r
209 * @cfg {Object} scope Optional. The scope (<tt><b>this</b></tt> reference) in which to execute the
\r
210 * renderer. Defaults to the Column configuration object.
\r
213 * @cfg {String} align Optional. Set the CSS text-align property of the column. Defaults to undefined.
\r
216 * @cfg {String} css Optional. An inline style definition string which is applied to all table cells in the column
\r
217 * (excluding headers). Defaults to undefined.
\r
220 * @cfg {Boolean} hideable Optional. Specify as <tt>false</tt> to prevent the user from hiding this column
\r
221 * (defaults to true). To disallow column hiding globally for all columns in the grid, use
\r
222 * {@link Ext.grid.GridPanel#enableColumnHide} instead.
\r
225 * @cfg {Ext.form.Field} editor Optional. The {@link Ext.form.Field} to use when editing values in this column
\r
226 * if editing is supported by the grid. See <tt>{@link #editable}</tt> also.
\r
229 // private. Used by ColumnModel to avoid reprocessing
\r
232 * Optional. A function which returns displayable data when passed the following parameters:
\r
233 * <div class="mdetail-params"><ul>
\r
234 * <li><b>value</b> : Object<p class="sub-desc">The data value for the cell.</p></li>
\r
235 * <li><b>metadata</b> : Object<p class="sub-desc">An object in which you may set the following attributes:<ul>
\r
236 * <li><b>css</b> : String<p class="sub-desc">A CSS class name to add to the cell's TD element.</p></li>
\r
237 * <li><b>attr</b> : String<p class="sub-desc">An HTML attribute definition string to apply to the data container
\r
238 * element <i>within</i> the table cell (e.g. 'style="color:red;"').</p></li></ul></p></li>
\r
239 * <li><b>record</b> : Ext.data.record<p class="sub-desc">The {@link Ext.data.Record} from which the data was
\r
240 * extracted.</p></li>
\r
241 * <li><b>rowIndex</b> : Number<p class="sub-desc">Row index</p></li>
\r
242 * <li><b>colIndex</b> : Number<p class="sub-desc">Column index</p></li>
\r
243 * <li><b>store</b> : Ext.data.Store<p class="sub-desc">The {@link Ext.data.Store} object from which the Record
\r
244 * was extracted.</p></li>
\r
246 * @property renderer
\r
249 renderer : function(value){
\r
250 if(typeof value == 'string' && value.length < 1){
\r
257 getEditor: function(rowIndex){
\r
258 return this.editable !== false ? this.editor : null;
\r
262 * Returns the {@link Ext.Editor editor} defined for this column that was created to wrap the {@link Ext.form.Field Field}
\r
263 * used to edit the cell.
\r
264 * @param {Number} rowIndex The row index
\r
265 * @return {Ext.Editor}
\r
267 getCellEditor: function(rowIndex){
\r
268 var editor = this.getEditor(rowIndex);
\r
270 if(!editor.startEdit){
\r
271 if(!editor.gridEditor){
\r
272 editor.gridEditor = new Ext.grid.GridEditor(editor);
\r
274 return editor.gridEditor;
\r
275 }else if(editor.startEdit){
\r
284 * @class Ext.grid.BooleanColumn
\r
285 * @extends Ext.grid.Column
\r
286 * <p>A Column definition class which renders boolean data fields. See the {@link Ext.grid.ColumnModel#xtype xtype}
\r
287 * config option of {@link Ext.grid.ColumnModel} for more details.</p>
\r
289 Ext.grid.BooleanColumn = Ext.extend(Ext.grid.Column, {
\r
291 * @cfg {String} trueText
\r
292 * The string returned by the renderer when the column value is not falsey (defaults to <tt>'true'</tt>).
\r
296 * @cfg {String} falseText
\r
297 * The string returned by the renderer when the column value is falsey (but not undefined) (defaults to
\r
298 * <tt>'false'</tt>).
\r
300 falseText: 'false',
\r
302 * @cfg {String} undefinedText
\r
303 * The string returned by the renderer when the column value is undefined (defaults to <tt>' '</tt>).
\r
305 undefinedText: ' ',
\r
307 constructor: function(cfg){
\r
308 Ext.grid.BooleanColumn.superclass.constructor.call(this, cfg);
\r
309 var t = this.trueText, f = this.falseText, u = this.undefinedText;
\r
310 this.renderer = function(v){
\r
311 if(v === undefined){
\r
314 if(!v || v === 'false'){
\r
323 * @class Ext.grid.NumberColumn
\r
324 * @extends Ext.grid.Column
\r
325 * <p>A Column definition class which renders a numeric data field according to a {@link #format} string. See the
\r
326 * {@link Ext.grid.ColumnModel#xtype xtype} config option of {@link Ext.grid.ColumnModel} for more details.</p>
\r
328 Ext.grid.NumberColumn = Ext.extend(Ext.grid.Column, {
\r
330 * @cfg {String} format
\r
331 * A formatting string as used by {@link Ext.util.Format#number} to format a numeric value for this Column
\r
332 * (defaults to <tt>'0,000.00'</tt>).
\r
334 format : '0,000.00',
\r
335 constructor: function(cfg){
\r
336 Ext.grid.NumberColumn.superclass.constructor.call(this, cfg);
\r
337 this.renderer = Ext.util.Format.numberRenderer(this.format);
\r
342 * @class Ext.grid.DateColumn
\r
343 * @extends Ext.grid.Column
\r
344 * <p>A Column definition class which renders a passed date according to the default locale, or a configured
\r
345 * {@link #format}. See the {@link Ext.grid.ColumnModel#xtype xtype} config option of {@link Ext.grid.ColumnModel}
\r
346 * for more details.</p>
\r
348 Ext.grid.DateColumn = Ext.extend(Ext.grid.Column, {
\r
350 * @cfg {String} format
\r
351 * A formatting string as used by {@link Date#format} to format a Date for this Column
\r
352 * (defaults to <tt>'m/d/Y'</tt>).
\r
355 constructor: function(cfg){
\r
356 Ext.grid.DateColumn.superclass.constructor.call(this, cfg);
\r
357 this.renderer = Ext.util.Format.dateRenderer(this.format);
\r
362 * @class Ext.grid.TemplateColumn
\r
363 * @extends Ext.grid.Column
\r
364 * <p>A Column definition class which renders a value by processing a {@link Ext.data.Record Record}'s
\r
365 * {@link Ext.data.Record#data data} using a {@link #tpl configured} {@link Ext.XTemplate XTemplate}.
\r
366 * See the {@link Ext.grid.ColumnModel#xtype xtype} config option of {@link Ext.grid.ColumnModel} for more
\r
369 Ext.grid.TemplateColumn = Ext.extend(Ext.grid.Column, {
\r
371 * @cfg {String/XTemplate} tpl
\r
372 * An {@link Ext.XTemplate XTemplate}, or an XTemplate <i>definition string</i> to use to process a
\r
373 * {@link Ext.data.Record Record}'s {@link Ext.data.Record#data data} to produce a column's rendered value.
\r
375 constructor: function(cfg){
\r
376 Ext.grid.TemplateColumn.superclass.constructor.call(this, cfg);
\r
377 var tpl = typeof Ext.isObject(this.tpl) ? this.tpl : new Ext.XTemplate(this.tpl);
\r
378 this.renderer = function(value, p, r){
\r
379 return tpl.apply(r.data);
\r
388 * @member Ext.grid.Column
\r
390 * <p>An object containing predefined Column classes keyed by a mnemonic code which may be referenced
\r
391 * by the {@link Ext.grid.ColumnModel#xtype xtype} config option of ColumnModel.</p>
\r
392 * <p>This contains the following properties</p><div class="mdesc-details"><ul>
\r
393 * <li>gridcolumn : <b>{@link Ext.grid.Column Column constructor}</b></li>
\r
394 * <li>booleancolumn : <b>{@link Ext.grid.BooleanColumn BooleanColumn constructor}</b></li>
\r
395 * <li>numbercolumn : <b>{@link Ext.grid.NumberColumn NumberColumn constructor}</b></li>
\r
396 * <li>datecolumn : <b>{@link Ext.grid.DateColumn DateColumn constructor}</b></li>
\r
397 * <li>templatecolumn : <b>{@link Ext.grid.TemplateColumn TemplateColumn constructor}</b></li>
\r
400 Ext.grid.Column.types = {
\r
401 gridcolumn : Ext.grid.Column,
\r
402 booleancolumn: Ext.grid.BooleanColumn,
\r
403 numbercolumn: Ext.grid.NumberColumn,
\r
404 datecolumn: Ext.grid.DateColumn,
\r
405 templatecolumn: Ext.grid.TemplateColumn
\r