src/widgets/grid/Column.js

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