Upgrade to ExtJS 3.1.1 - Released 02/08/2010
[extjs.git] / docs / source / Column.html
1 <html>\r
2 <head>\r
3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    \r
4   <title>The source code</title>\r
5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
7 </head>\r
8 <body  onload="prettyPrint();">\r
9     <pre class="prettyprint lang-js"><div id="cls-Ext.grid.Column"></div>/**\r
10  * @class Ext.grid.Column\r
11  * <p>This class encapsulates column configuration data to be used in the initialization of a\r
12  * {@link Ext.grid.ColumnModel ColumnModel}.</p>\r
13  * <p>While subclasses are provided to render data in different ways, this class renders a passed\r
14  * data field unchanged and is usually used for textual columns.</p>\r
15  */\r
16 Ext.grid.Column = Ext.extend(Object, {\r
17     <div id="cfg-Ext.grid.Column-editable"></div>/**\r
18      * @cfg {Boolean} editable Optional. Defaults to <tt>true</tt>, enabling the configured\r
19      * <tt>{@link #editor}</tt>.  Set to <tt>false</tt> to initially disable editing on this column.\r
20      * The initial configuration may be dynamically altered using\r
21      * {@link Ext.grid.ColumnModel}.{@link Ext.grid.ColumnModel#setEditable setEditable()}.\r
22      */\r
23     <div id="cfg-Ext.grid.Column-id"></div>/**\r
24      * @cfg {String} id Optional. A name which identifies this column (defaults to the column's initial\r
25      * ordinal position.) The <tt>id</tt> is used to create a CSS <b>class</b> name which is applied to all\r
26      * table cells (including headers) in that column (in this context the <tt>id</tt> does not need to be\r
27      * unique). The class name takes the form of <pre>x-grid3-td-<b>id</b></pre>\r
28      * Header cells will also receive this class name, but will also have the class <pre>x-grid3-hd</pre>\r
29      * So, to target header cells, use CSS selectors such as:<pre>.x-grid3-hd-row .x-grid3-td-<b>id</b></pre>\r
30      * The {@link Ext.grid.GridPanel#autoExpandColumn} grid config option references the column via this\r
31      * unique identifier.\r
32      */\r
33     <div id="cfg-Ext.grid.Column-header"></div>/**\r
34      * @cfg {String} header Optional. The header text to be used as innerHTML\r
35      * (html tags are accepted) to display in the Grid view.  <b>Note</b>: to\r
36      * have a clickable header with no text displayed use <tt>'&#160;'</tt>.\r
37      */\r
38     <div id="cfg-Ext.grid.Column-groupable"></div>/**\r
39      * @cfg {Boolean} groupable Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option\r
40      * may be used to disable the header menu item to group by the column selected. Defaults to <tt>true</tt>,\r
41      * which enables the header menu group option.  Set to <tt>false</tt> to disable (but still show) the\r
42      * group option in the header menu for the column. See also <code>{@link #groupName}</code>.\r
43      */\r
44     <div id="cfg-Ext.grid.Column-groupName"></div>/**\r
45      * @cfg {String} groupName Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option\r
46      * may be used to specify the text with which to prefix the group field value in the group header line.\r
47      * See also {@link #groupRenderer} and\r
48      * {@link Ext.grid.GroupingView}.{@link Ext.grid.GroupingView#showGroupName showGroupName}.\r
49      */\r
50     <div id="cfg-Ext.grid.Column-groupRenderer"></div>/**\r
51      * @cfg {Function} groupRenderer <p>Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option\r
52      * may be used to specify the function used to format the grouping field value for display in the group\r
53      * {@link #groupName header}.  If a <tt><b>groupRenderer</b></tt> is not specified, the configured\r
54      * <tt><b>{@link #renderer}</b></tt> will be called; if a <tt><b>{@link #renderer}</b></tt> is also not specified\r
55      * the new value of the group field will be used.</p>\r
56      * <p>The called function (either the <tt><b>groupRenderer</b></tt> or <tt><b>{@link #renderer}</b></tt>) will be\r
57      * passed the following parameters:\r
58      * <div class="mdetail-params"><ul>\r
59      * <li><b>v</b> : Object<p class="sub-desc">The new value of the group field.</p></li>\r
60      * <li><b>unused</b> : undefined<p class="sub-desc">Unused parameter.</p></li>\r
61      * <li><b>r</b> : Ext.data.Record<p class="sub-desc">The Record providing the data\r
62      * for the row which caused group change.</p></li>\r
63      * <li><b>rowIndex</b> : Number<p class="sub-desc">The row index of the Record which caused group change.</p></li>\r
64      * <li><b>colIndex</b> : Number<p class="sub-desc">The column index of the group field.</p></li>\r
65      * <li><b>ds</b> : Ext.data.Store<p class="sub-desc">The Store which is providing the data Model.</p></li>\r
66      * </ul></div></p>\r
67      * <p>The function should return a string value.</p>\r
68      */\r
69     <div id="cfg-Ext.grid.Column-emptyGroupText"></div>/**\r
70      * @cfg {String} emptyGroupText Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option\r
71      * may be used to specify the text to display when there is an empty group value. Defaults to the\r
72      * {@link Ext.grid.GroupingView}.{@link Ext.grid.GroupingView#emptyGroupText emptyGroupText}.\r
73      */\r
74     <div id="cfg-Ext.grid.Column-dataIndex"></div>/**\r
75      * @cfg {String} dataIndex <p><b>Required</b>. The name of the field in the\r
76      * grid's {@link Ext.data.Store}'s {@link Ext.data.Record} definition from\r
77      * which to draw the column's value.</p>\r
78      */\r
79     <div id="cfg-Ext.grid.Column-width"></div>/**\r
80      * @cfg {Number} width\r
81      * Optional. The initial width in pixels of the column.\r
82      * The width of each column can also be affected if any of the following are configured:\r
83      * <div class="mdetail-params"><ul>\r
84      * <li>{@link Ext.grid.GridPanel}.<tt>{@link Ext.grid.GridPanel#autoExpandColumn autoExpandColumn}</tt></li>\r
85      * <li>{@link Ext.grid.GridView}.<tt>{@link Ext.grid.GridView#forceFit forceFit}</tt>\r
86      * <div class="sub-desc">\r
87      * <p>By specifying <tt>forceFit:true</tt>, {@link #fixed non-fixed width} columns will be\r
88      * re-proportioned (based on the relative initial widths) to fill the width of the grid so\r
89      * that no horizontal scrollbar is shown.</p>\r
90      * </div></li>\r
91      * <li>{@link Ext.grid.GridView}.<tt>{@link Ext.grid.GridView#autoFill autoFill}</tt></li>\r
92      * <li>{@link Ext.grid.GridPanel}.<tt>{@link Ext.grid.GridPanel#minColumnWidth minColumnWidth}</tt></li>\r
93      * <br><p><b>Note</b>: when the width of each column is determined, a space on the right side\r
94      * is reserved for the vertical scrollbar.  The\r
95      * {@link Ext.grid.GridView}.<tt>{@link Ext.grid.GridView#scrollOffset scrollOffset}</tt>\r
96      * can be modified to reduce or eliminate the reserved offset.</p>\r
97      */\r
98     <div id="cfg-Ext.grid.Column-sortable"></div>/**\r
99      * @cfg {Boolean} sortable Optional. <tt>true</tt> if sorting is to be allowed on this column.\r
100      * Defaults to the value of the <code>{@link Ext.grid.ColumnModel#defaultSortable}</code> property.\r
101      * Whether local/remote sorting is used is specified in <code>{@link Ext.data.Store#remoteSort}</code>.\r
102      */\r
103     <div id="cfg-Ext.grid.Column-fixed"></div>/**\r
104      * @cfg {Boolean} fixed Optional. <tt>true</tt> if the column width cannot be changed.  Defaults to <tt>false</tt>.\r
105      */\r
106     <div id="cfg-Ext.grid.Column-resizable"></div>/**\r
107      * @cfg {Boolean} resizable Optional. <tt>false</tt> to disable column resizing. Defaults to <tt>true</tt>.\r
108      */\r
109     <div id="cfg-Ext.grid.Column-menuDisabled"></div>/**\r
110      * @cfg {Boolean} menuDisabled Optional. <tt>true</tt> to disable the column menu. Defaults to <tt>false</tt>.\r
111      */\r
112     <div id="cfg-Ext.grid.Column-hidden"></div>/**\r
113      * @cfg {Boolean} hidden\r
114      * Optional. <tt>true</tt> to initially hide this column. Defaults to <tt>false</tt>.\r
115      * A hidden column {@link Ext.grid.GridPanel#enableColumnHide may be shown via the header row menu}.\r
116      * If a column is never to be shown, simply do not include this column in the Column Model at all. \r
117      */\r
118     <div id="cfg-Ext.grid.Column-tooltip"></div>/**\r
119      * @cfg {String} tooltip Optional. A text string to use as the column header's tooltip.  If Quicktips\r
120      * are enabled, this value will be used as the text of the quick tip, otherwise it will be set as the\r
121      * header's HTML title attribute. Defaults to ''.\r
122      */\r
123     <div id="cfg-Ext.grid.Column-renderer"></div>/**\r
124      * @cfg {Mixed} renderer\r
125      * <p>For an alternative to specifying a renderer see <code>{@link #xtype}</code></p>\r
126      * <p>Optional. A renderer is an 'interceptor' method which can be used transform data (value,\r
127      * appearance, etc.) before it is rendered). This may be specified in either of three ways:\r
128      * <div class="mdetail-params"><ul>\r
129      * <li>A renderer function used to return HTML markup for a cell given the cell's data value.</li>\r
130      * <li>A string which references a property name of the {@link Ext.util.Format} class which\r
131      * provides a renderer function.</li>\r
132      * <li>An object specifying both the renderer function, and its execution scope (<tt><b>this</b></tt>\r
133      * reference) e.g.:<pre style="margin-left:1.2em"><code>\r
134 {\r
135     fn: this.gridRenderer,\r
136     scope: this\r
137 }\r
138 </code></pre></li></ul></div>\r
139      * If not specified, the default renderer uses the raw data value.</p>\r
140      * <p>For information about the renderer function (passed parameters, etc.), see\r
141      * {@link Ext.grid.ColumnModel#setRenderer}. An example of specifying renderer function inline:</p><pre><code>\r
142 var companyColumn = {\r
143    header: 'Company Name',\r
144    dataIndex: 'company',\r
145    renderer: function(value, metaData, record, rowIndex, colIndex, store) {\r
146       // provide the logic depending on business rules\r
147       // name of your own choosing to manipulate the cell depending upon\r
148       // the data in the underlying Record object.\r
149       if (value == 'whatever') {\r
150           //metaData.css : String : A CSS class name to add to the TD element of the cell.\r
151           //metaData.attr : String : An html attribute definition string to apply to\r
152           //                         the data container element within the table\r
153           //                         cell (e.g. 'style="color:red;"').\r
154           metaData.css = 'name-of-css-class-you-will-define';\r
155       }\r
156       return value;\r
157    }\r
158 }\r
159      * </code></pre>\r
160      * See also {@link #scope}.\r
161      */\r
162     <div id="cfg-Ext.grid.Column-xtype"></div>/**\r
163      * @cfg {String} xtype Optional. A String which references a predefined {@link Ext.grid.Column} subclass\r
164      * type which is preconfigured with an appropriate <code>{@link #renderer}</code> to be easily\r
165      * configured into a ColumnModel. The predefined {@link Ext.grid.Column} subclass types are:\r
166      * <div class="mdetail-params"><ul>\r
167      * <li><b><tt>gridcolumn</tt></b> : {@link Ext.grid.Column} (<b>Default</b>)<p class="sub-desc"></p></li>\r
168      * <li><b><tt>booleancolumn</tt></b> : {@link Ext.grid.BooleanColumn}<p class="sub-desc"></p></li>\r
169      * <li><b><tt>numbercolumn</tt></b> : {@link Ext.grid.NumberColumn}<p class="sub-desc"></p></li>\r
170      * <li><b><tt>datecolumn</tt></b> : {@link Ext.grid.DateColumn}<p class="sub-desc"></p></li>\r
171      * <li><b><tt>templatecolumn</tt></b> : {@link Ext.grid.TemplateColumn}<p class="sub-desc"></p></li>\r
172      * </ul></div>\r
173      * <p>Configuration properties for the specified <code>xtype</code> may be specified with\r
174      * the Column configuration properties, for example:</p>\r
175      * <pre><code>\r
176 var grid = new Ext.grid.GridPanel({\r
177     ...\r
178     columns: [{\r
179         header: 'Last Updated',\r
180         dataIndex: 'lastChange',\r
181         width: 85,\r
182         sortable: true,\r
183         //renderer: Ext.util.Format.dateRenderer('m/d/Y'),\r
184         xtype: 'datecolumn', // use xtype instead of renderer\r
185         format: 'M/d/Y' // configuration property for {@link Ext.grid.DateColumn}\r
186     }, {\r
187         ...\r
188     }]\r
189 });\r
190      * </code></pre>\r
191      */\r
192     <div id="cfg-Ext.grid.Column-scope"></div>/**\r
193      * @cfg {Object} scope Optional. The scope (<tt><b>this</b></tt> reference) in which to execute the\r
194      * renderer.  Defaults to the Column configuration object.\r
195      */\r
196     <div id="cfg-Ext.grid.Column-align"></div>/**\r
197      * @cfg {String} align Optional. Set the CSS text-align property of the column.  Defaults to undefined.\r
198      */\r
199     <div id="cfg-Ext.grid.Column-css"></div>/**\r
200      * @cfg {String} css Optional. An inline style definition string which is applied to all table cells in the column\r
201      * (excluding headers). Defaults to undefined.\r
202      */\r
203     <div id="cfg-Ext.grid.Column-hideable"></div>/**\r
204      * @cfg {Boolean} hideable Optional. Specify as <tt>false</tt> to prevent the user from hiding this column\r
205      * (defaults to true).  To disallow column hiding globally for all columns in the grid, use\r
206      * {@link Ext.grid.GridPanel#enableColumnHide} instead.\r
207      */\r
208     <div id="cfg-Ext.grid.Column-editor"></div>/**\r
209      * @cfg {Ext.form.Field} editor Optional. The {@link Ext.form.Field} to use when editing values in this column\r
210      * if editing is supported by the grid. See <tt>{@link #editable}</tt> also.\r
211      */\r
212 \r
213     /**\r
214      * @private\r
215      * @cfg {Boolean} isColumn\r
216      * Used by ColumnModel setConfig method to avoid reprocessing a Column\r
217      * if <code>isColumn</code> is not set ColumnModel will recreate a new Ext.grid.Column\r
218      * Defaults to true.\r
219      */\r
220     isColumn : true,\r
221     \r
222     constructor : function(config){\r
223         Ext.apply(this, config);\r
224         \r
225         if(Ext.isString(this.renderer)){\r
226             this.renderer = Ext.util.Format[this.renderer];\r
227         }else if(Ext.isObject(this.renderer)){\r
228             this.scope = this.renderer.scope;\r
229             this.renderer = this.renderer.fn;\r
230         }\r
231         if(!this.scope){\r
232             this.scope = this;\r
233         }\r
234         \r
235         var ed = this.editor;\r
236         delete this.editor;\r
237         this.setEditor(ed);\r
238     },\r
239 \r
240     <div id="prop-Ext.grid.Column-renderer"></div>/**\r
241      * Optional. A function which returns displayable data when passed the following parameters:\r
242      * <div class="mdetail-params"><ul>\r
243      * <li><b>value</b> : Object<p class="sub-desc">The data value for the cell.</p></li>\r
244      * <li><b>metadata</b> : Object<p class="sub-desc">An object in which you may set the following attributes:<ul>\r
245      * <li><b>css</b> : String<p class="sub-desc">A CSS class name to add to the cell's TD element.</p></li>\r
246      * <li><b>attr</b> : String<p class="sub-desc">An HTML attribute definition string to apply to the data container\r
247      * element <i>within</i> the table cell (e.g. 'style="color:red;"').</p></li></ul></p></li>\r
248      * <li><b>record</b> : Ext.data.record<p class="sub-desc">The {@link Ext.data.Record} from which the data was\r
249      * extracted.</p></li>\r
250      * <li><b>rowIndex</b> : Number<p class="sub-desc">Row index</p></li>\r
251      * <li><b>colIndex</b> : Number<p class="sub-desc">Column index</p></li>\r
252      * <li><b>store</b> : Ext.data.Store<p class="sub-desc">The {@link Ext.data.Store} object from which the Record\r
253      * was extracted.</p></li>\r
254      * </ul></div>\r
255      * @property renderer\r
256      * @type Function\r
257      */\r
258     renderer : function(value){\r
259         if(Ext.isString(value) && value.length < 1){\r
260             return '&#160;';\r
261         }\r
262         return value;\r
263     },\r
264 \r
265     // private\r
266     getEditor: function(rowIndex){\r
267         return this.editable !== false ? this.editor : null;\r
268     },\r
269     \r
270     <div id="method-Ext.grid.Column-setEditor"></div>/**\r
271      * Sets a new editor for this column.\r
272      * @param {Ext.Editor/Ext.form.Field} editor The editor to set\r
273      */\r
274     setEditor : function(editor){\r
275         if(this.editor){\r
276             this.editor.destroy();\r
277         }\r
278         this.editor = null;\r
279         if(editor){\r
280             //not an instance, create it\r
281             if(!editor.isXType){\r
282                 editor = Ext.create(editor, 'textfield');\r
283             }\r
284             //check if it's wrapped in an editor\r
285             if(!editor.startEdit){\r
286                 editor = new Ext.grid.GridEditor(editor);\r
287             }\r
288             this.editor = editor;\r
289         }\r
290     },\r
291     \r
292     destroy : function(){\r
293         this.setEditor(null);\r
294     },\r
295 \r
296     <div id="method-Ext.grid.Column-getCellEditor"></div>/**\r
297      * Returns the {@link Ext.Editor editor} defined for this column that was created to wrap the {@link Ext.form.Field Field}\r
298      * used to edit the cell.\r
299      * @param {Number} rowIndex The row index\r
300      * @return {Ext.Editor}\r
301      */\r
302     getCellEditor: function(rowIndex){\r
303         return this.getEditor(rowIndex);\r
304     }\r
305 });\r
306 \r
307 <div id="cls-Ext.grid.BooleanColumn"></div>/**\r
308  * @class Ext.grid.BooleanColumn\r
309  * @extends Ext.grid.Column\r
310  * <p>A Column definition class which renders boolean data fields.  See the {@link Ext.grid.Column#xtype xtype}\r
311  * config option of {@link Ext.grid.Column} for more details.</p>\r
312  */\r
313 Ext.grid.BooleanColumn = Ext.extend(Ext.grid.Column, {\r
314     <div id="cfg-Ext.grid.BooleanColumn-trueText"></div>/**\r
315      * @cfg {String} trueText\r
316      * The string returned by the renderer when the column value is not falsey (defaults to <tt>'true'</tt>).\r
317      */\r
318     trueText: 'true',\r
319     <div id="cfg-Ext.grid.BooleanColumn-falseText"></div>/**\r
320      * @cfg {String} falseText\r
321      * The string returned by the renderer when the column value is falsey (but not undefined) (defaults to\r
322      * <tt>'false'</tt>).\r
323      */\r
324     falseText: 'false',\r
325     <div id="cfg-Ext.grid.BooleanColumn-undefinedText"></div>/**\r
326      * @cfg {String} undefinedText\r
327      * The string returned by the renderer when the column value is undefined (defaults to <tt>'&#160;'</tt>).\r
328      */\r
329     undefinedText: '&#160;',\r
330 \r
331     constructor: function(cfg){\r
332         Ext.grid.BooleanColumn.superclass.constructor.call(this, cfg);\r
333         var t = this.trueText, f = this.falseText, u = this.undefinedText;\r
334         this.renderer = function(v){\r
335             if(v === undefined){\r
336                 return u;\r
337             }\r
338             if(!v || v === 'false'){\r
339                 return f;\r
340             }\r
341             return t;\r
342         };\r
343     }\r
344 });\r
345 \r
346 <div id="cls-Ext.grid.NumberColumn"></div>/**\r
347  * @class Ext.grid.NumberColumn\r
348  * @extends Ext.grid.Column\r
349  * <p>A Column definition class which renders a numeric data field according to a {@link #format} string.  See the\r
350  * {@link Ext.grid.Column#xtype xtype} config option of {@link Ext.grid.Column} for more details.</p>\r
351  */\r
352 Ext.grid.NumberColumn = Ext.extend(Ext.grid.Column, {\r
353     <div id="cfg-Ext.grid.NumberColumn-format"></div>/**\r
354      * @cfg {String} format\r
355      * A formatting string as used by {@link Ext.util.Format#number} to format a numeric value for this Column\r
356      * (defaults to <tt>'0,000.00'</tt>).\r
357      */\r
358     format : '0,000.00',\r
359     constructor: function(cfg){\r
360         Ext.grid.NumberColumn.superclass.constructor.call(this, cfg);\r
361         this.renderer = Ext.util.Format.numberRenderer(this.format);\r
362     }\r
363 });\r
364 \r
365 <div id="cls-Ext.grid.DateColumn"></div>/**\r
366  * @class Ext.grid.DateColumn\r
367  * @extends Ext.grid.Column\r
368  * <p>A Column definition class which renders a passed date according to the default locale, or a configured\r
369  * {@link #format}. See the {@link Ext.grid.Column#xtype xtype} config option of {@link Ext.grid.Column}\r
370  * for more details.</p>\r
371  */\r
372 Ext.grid.DateColumn = Ext.extend(Ext.grid.Column, {\r
373     <div id="cfg-Ext.grid.DateColumn-format"></div>/**\r
374      * @cfg {String} format\r
375      * A formatting string as used by {@link Date#format} to format a Date for this Column\r
376      * (defaults to <tt>'m/d/Y'</tt>).\r
377      */\r
378     format : 'm/d/Y',\r
379     constructor: function(cfg){\r
380         Ext.grid.DateColumn.superclass.constructor.call(this, cfg);\r
381         this.renderer = Ext.util.Format.dateRenderer(this.format);\r
382     }\r
383 });\r
384 \r
385 <div id="cls-Ext.grid.TemplateColumn"></div>/**\r
386  * @class Ext.grid.TemplateColumn\r
387  * @extends Ext.grid.Column\r
388  * <p>A Column definition class which renders a value by processing a {@link Ext.data.Record Record}'s\r
389  * {@link Ext.data.Record#data data} using a {@link #tpl configured} {@link Ext.XTemplate XTemplate}.\r
390  * See the {@link Ext.grid.Column#xtype xtype} config option of {@link Ext.grid.Column} for more\r
391  * details.</p>\r
392  */\r
393 Ext.grid.TemplateColumn = Ext.extend(Ext.grid.Column, {\r
394     <div id="cfg-Ext.grid.TemplateColumn-tpl"></div>/**\r
395      * @cfg {String/XTemplate} tpl\r
396      * An {@link Ext.XTemplate XTemplate}, or an XTemplate <i>definition string</i> to use to process a\r
397      * {@link Ext.data.Record Record}'s {@link Ext.data.Record#data data} to produce a column's rendered value.\r
398      */\r
399     constructor: function(cfg){\r
400         Ext.grid.TemplateColumn.superclass.constructor.call(this, cfg);\r
401         var tpl = (!Ext.isPrimitive(this.tpl) && this.tpl.compile) ? this.tpl : new Ext.XTemplate(this.tpl);\r
402         this.renderer = function(value, p, r){\r
403             return tpl.apply(r.data);\r
404         };\r
405         this.tpl = tpl;\r
406     }\r
407 });\r
408 \r
409 /*\r
410  * @property types\r
411  * @type Object\r
412  * @member Ext.grid.Column\r
413  * @static\r
414  * <p>An object containing predefined Column classes keyed by a mnemonic code which may be referenced\r
415  * by the {@link Ext.grid.ColumnModel#xtype xtype} config option of ColumnModel.</p>\r
416  * <p>This contains the following properties</p><div class="mdesc-details"><ul>\r
417  * <li>gridcolumn : <b>{@link Ext.grid.Column Column constructor}</b></li>\r
418  * <li>booleancolumn : <b>{@link Ext.grid.BooleanColumn BooleanColumn constructor}</b></li>\r
419  * <li>numbercolumn : <b>{@link Ext.grid.NumberColumn NumberColumn constructor}</b></li>\r
420  * <li>datecolumn : <b>{@link Ext.grid.DateColumn DateColumn constructor}</b></li>\r
421  * <li>templatecolumn : <b>{@link Ext.grid.TemplateColumn TemplateColumn constructor}</b></li>\r
422  * </ul></div>\r
423  */\r
424 Ext.grid.Column.types = {\r
425     gridcolumn : Ext.grid.Column,\r
426     booleancolumn: Ext.grid.BooleanColumn,\r
427     numbercolumn: Ext.grid.NumberColumn,\r
428     datecolumn: Ext.grid.DateColumn,\r
429     templatecolumn: Ext.grid.TemplateColumn\r
430 };</pre>    \r
431 </body>\r
432 </html>