src/widgets/grid/Column.js

   1 /*!
   2  * Ext JS Library 3.3.1
   3  * Copyright(c) 2006-2010 Sencha Inc.
   4  * licensing@sencha.com
   5  * http://www.sencha.com/license
   6  */
   7 /**
   8  * @class Ext.grid.Column
   9  * <p>This class encapsulates column configuration data to be used in the initialization of a
  10  * {@link Ext.grid.ColumnModel ColumnModel}.</p>
  11  * <p>While subclasses are provided to render data in different ways, this class renders a passed
  12  * data field unchanged and is usually used for textual columns.</p>
  13  */
  14 Ext.grid.Column = Ext.extend(Ext.util.Observable, {
  15     /**
  16      * @cfg {Boolean} editable Optional. Defaults to <tt>true</tt>, enabling the configured
  17      * <tt>{@link #editor}</tt>.  Set to <tt>false</tt> to initially disable editing on this column.
  18      * The initial configuration may be dynamically altered using
  19      * {@link Ext.grid.ColumnModel}.{@link Ext.grid.ColumnModel#setEditable setEditable()}.
  20      */
  21     /**
  22      * @cfg {String} id Optional. A name which identifies this column (defaults to the column's initial
  23      * ordinal position.) The <tt>id</tt> is used to create a CSS <b>class</b> name which is applied to all
  24      * table cells (including headers) in that column (in this context the <tt>id</tt> does not need to be
  25      * unique). The class name takes the form of <pre>x-grid3-td-<b>id</b></pre>
  26      * Header cells will also receive this class name, but will also have the class <pre>x-grid3-hd</pre>
  27      * So, to target header cells, use CSS selectors such as:<pre>.x-grid3-hd-row .x-grid3-td-<b>id</b></pre>
  28      * The {@link Ext.grid.GridPanel#autoExpandColumn} grid config option references the column via this
  29      * unique identifier.
  30      */
  31     /**
  32      * @cfg {String} header Optional. The header text to be used as innerHTML
  33      * (html tags are accepted) to display in the Grid view.  <b>Note</b>: to
  34      * have a clickable header with no text displayed use <tt>'&amp;#160;'</tt>.
  35      */
  36     /**
  37      * @cfg {Boolean} groupable Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
  38      * may be used to disable the header menu item to group by the column selected. Defaults to <tt>true</tt>,
  39      * which enables the header menu group option.  Set to <tt>false</tt> to disable (but still show) the
  40      * group option in the header menu for the column. See also <code>{@link #groupName}</code>.
  41      */
  42     /**
  43      * @cfg {String} groupName Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
  44      * may be used to specify the text with which to prefix the group field value in the group header line.
  45      * See also {@link #groupRenderer} and
  46      * {@link Ext.grid.GroupingView}.{@link Ext.grid.GroupingView#showGroupName showGroupName}.
  47      */
  48     /**
  49      * @cfg {Function} groupRenderer <p>Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
  50      * may be used to specify the function used to format the grouping field value for display in the group
  51      * {@link #groupName header}.  If a <tt><b>groupRenderer</b></tt> is not specified, the configured
  52      * <tt><b>{@link #renderer}</b></tt> will be called; if a <tt><b>{@link #renderer}</b></tt> is also not specified
  53      * the new value of the group field will be used.</p>
  54      * <p>The called function (either the <tt><b>groupRenderer</b></tt> or <tt><b>{@link #renderer}</b></tt>) will be
  55      * passed the following parameters:
  56      * <div class="mdetail-params"><ul>
  57      * <li><b>v</b> : Object<p class="sub-desc">The new value of the group field.</p></li>
  58      * <li><b>unused</b> : undefined<p class="sub-desc">Unused parameter.</p></li>
  59      * <li><b>r</b> : Ext.data.Record<p class="sub-desc">The Record providing the data
  60      * for the row which caused group change.</p></li>
  61      * <li><b>rowIndex</b> : Number<p class="sub-desc">The row index of the Record which caused group change.</p></li>
  62      * <li><b>colIndex</b> : Number<p class="sub-desc">The column index of the group field.</p></li>
  63      * <li><b>ds</b> : Ext.data.Store<p class="sub-desc">The Store which is providing the data Model.</p></li>
  64      * </ul></div></p>
  65      * <p>The function should return a string value.</p>
  66      */
  67     /**
  68      * @cfg {String} emptyGroupText Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
  69      * may be used to specify the text to display when there is an empty group value. Defaults to the
  70      * {@link Ext.grid.GroupingView}.{@link Ext.grid.GroupingView#emptyGroupText emptyGroupText}.
  71      */
  72     /**
  73      * @cfg {String} dataIndex <p><b>Required</b>. The name of the field in the
  74      * grid's {@link Ext.data.Store}'s {@link Ext.data.Record} definition from
  75      * which to draw the column's value.</p>
  76      */
  77     /**
  78      * @cfg {Number} width
  79      * Optional. The initial width in pixels of the column.
  80      * The width of each column can also be affected if any of the following are configured:
  81      * <div class="mdetail-params"><ul>
  82      * <li>{@link Ext.grid.GridPanel}.<tt>{@link Ext.grid.GridPanel#autoExpandColumn autoExpandColumn}</tt></li>
  83      * <li>{@link Ext.grid.GridView}.<tt>{@link Ext.grid.GridView#forceFit forceFit}</tt>
  84      * <div class="sub-desc">
  85      * <p>By specifying <tt>forceFit:true</tt>, {@link #fixed non-fixed width} columns will be
  86      * re-proportioned (based on the relative initial widths) to fill the width of the grid so
  87      * that no horizontal scrollbar is shown.</p>
  88      * </div></li>
  89      * <li>{@link Ext.grid.GridView}.<tt>{@link Ext.grid.GridView#autoFill autoFill}</tt></li>
  90      * <li>{@link Ext.grid.GridPanel}.<tt>{@link Ext.grid.GridPanel#minColumnWidth minColumnWidth}</tt></li>
  91      * <br><p><b>Note</b>: when the width of each column is determined, a space on the right side
  92      * is reserved for the vertical scrollbar.  The
  93      * {@link Ext.grid.GridView}.<tt>{@link Ext.grid.GridView#scrollOffset scrollOffset}</tt>
  94      * can be modified to reduce or eliminate the reserved offset.</p>
  95      */
  96     /**
  97      * @cfg {Boolean} sortable Optional. <tt>true</tt> if sorting is to be allowed on this column.
  98      * Defaults to the value of the <code>{@link Ext.grid.ColumnModel#defaultSortable}</code> property.
  99      * Whether local/remote sorting is used is specified in <code>{@link Ext.data.Store#remoteSort}</code>.
 100      */
 101     /**
 102      * @cfg {Boolean} fixed Optional. <tt>true</tt> if the column width cannot be changed.  Defaults to <tt>false</tt>.
 103      */
 104     /**
 105      * @cfg {Boolean} resizable Optional. <tt>false</tt> to disable column resizing. Defaults to <tt>true</tt>.
 106      */
 107     /**
 108      * @cfg {Boolean} menuDisabled Optional. <tt>true</tt> to disable the column menu. Defaults to <tt>false</tt>.
 109      */
 110     /**
 111      * @cfg {Boolean} hidden
 112      * Optional. <tt>true</tt> to initially hide this column. Defaults to <tt>false</tt>.
 113      * A hidden column {@link Ext.grid.GridPanel#enableColumnHide may be shown via the header row menu}.
 114      * If a column is never to be shown, simply do not include this column in the Column Model at all.
 115      */
 116     /**
 117      * @cfg {String} tooltip Optional. A text string to use as the column header's tooltip.  If Quicktips
 118      * are enabled, this value will be used as the text of the quick tip, otherwise it will be set as the
 119      * header's HTML title attribute. Defaults to ''.
 120      */
 121     /**
 122      * @cfg {Mixed} renderer
 123      * <p>For an alternative to specifying a renderer see <code>{@link #xtype}</code></p>
 124      * <p>Optional. A renderer is an 'interceptor' method which can be used transform data (value,
 125      * appearance, etc.) before it is rendered). This may be specified in either of three ways:
 126      * <div class="mdetail-params"><ul>
 127      * <li>A renderer function used to return HTML markup for a cell given the cell's data value.</li>
 128      * <li>A string which references a property name of the {@link Ext.util.Format} class which
 129      * provides a renderer function.</li>
 130      * <li>An object specifying both the renderer function, and its execution scope (<tt><b>this</b></tt>
 131      * reference) e.g.:<pre style="margin-left:1.2em"><code>
 132 {
 133     fn: this.gridRenderer,
 134     scope: this
 135 }
 136 </code></pre></li></ul></div>
 137      * If not specified, the default renderer uses the raw data value.</p>
 138      * <p>For information about the renderer function (passed parameters, etc.), see
 139      * {@link Ext.grid.ColumnModel#setRenderer}. An example of specifying renderer function inline:</p><pre><code>
 140 var companyColumn = {
 141    header: 'Company Name',
 142    dataIndex: 'company',
 143    renderer: function(value, metaData, record, rowIndex, colIndex, store) {
 144       // provide the logic depending on business rules
 145       // name of your own choosing to manipulate the cell depending upon
 146       // the data in the underlying Record object.
 147       if (value == 'whatever') {
 148           //metaData.css : String : A CSS class name to add to the TD element of the cell.
 149           //metaData.attr : String : An html attribute definition string to apply to
 150           //                         the data container element within the table
 151           //                         cell (e.g. 'style="color:red;"').
 152           metaData.css = 'name-of-css-class-you-will-define';
 153       }
 154       return value;
 155    }
 156 }
 157      * </code></pre>
 158      * See also {@link #scope}.
 159      */
 160     /**
 161      * @cfg {String} xtype Optional. A String which references a predefined {@link Ext.grid.Column} subclass
 162      * type which is preconfigured with an appropriate <code>{@link #renderer}</code> to be easily
 163      * configured into a ColumnModel. The predefined {@link Ext.grid.Column} subclass types are:
 164      * <div class="mdetail-params"><ul>
 165      * <li><b><tt>gridcolumn</tt></b> : {@link Ext.grid.Column} (<b>Default</b>)<p class="sub-desc"></p></li>
 166      * <li><b><tt>booleancolumn</tt></b> : {@link Ext.grid.BooleanColumn}<p class="sub-desc"></p></li>
 167      * <li><b><tt>numbercolumn</tt></b> : {@link Ext.grid.NumberColumn}<p class="sub-desc"></p></li>
 168      * <li><b><tt>datecolumn</tt></b> : {@link Ext.grid.DateColumn}<p class="sub-desc"></p></li>
 169      * <li><b><tt>templatecolumn</tt></b> : {@link Ext.grid.TemplateColumn}<p class="sub-desc"></p></li>
 170      * </ul></div>
 171      * <p>Configuration properties for the specified <code>xtype</code> may be specified with
 172      * the Column configuration properties, for example:</p>
 173      * <pre><code>
 174 var grid = new Ext.grid.GridPanel({
 175     ...
 176     columns: [{
 177         header: 'Last Updated',
 178         dataIndex: 'lastChange',
 179         width: 85,
 180         sortable: true,
 181         //renderer: Ext.util.Format.dateRenderer('m/d/Y'),
 182         xtype: 'datecolumn', // use xtype instead of renderer
 183         format: 'M/d/Y' // configuration property for {@link Ext.grid.DateColumn}
 184     }, {
 185         ...
 186     }]
 187 });
 188      * </code></pre>
 189      */
 190     /**
 191      * @cfg {Object} scope Optional. The scope (<tt><b>this</b></tt> reference) in which to execute the
 192      * renderer.  Defaults to the Column configuration object.
 193      */
 194     /**
 195      * @cfg {String} align Optional. Set the CSS text-align property of the column.  Defaults to undefined.
 196      */
 197     /**
 198      * @cfg {String} css Optional. An inline style definition string which is applied to all table cells in the column
 199      * (excluding headers). Defaults to undefined.
 200      */
 201     /**
 202      * @cfg {Boolean} hideable Optional. Specify as <tt>false</tt> to prevent the user from hiding this column
 203      * (defaults to true).  To disallow column hiding globally for all columns in the grid, use
 204      * {@link Ext.grid.GridPanel#enableColumnHide} instead.
 205      */
 206     /**
 207      * @cfg {Ext.form.Field} editor Optional. The {@link Ext.form.Field} to use when editing values in this column
 208      * if editing is supported by the grid. See <tt>{@link #editable}</tt> also.
 209      */
 210
 211     /**
 212      * @private
 213      * @cfg {Boolean} isColumn
 214      * Used by ColumnModel setConfig method to avoid reprocessing a Column
 215      * if <code>isColumn</code> is not set ColumnModel will recreate a new Ext.grid.Column
 216      * Defaults to true.
 217      */
 218     isColumn : true,
 219
 220     constructor : function(config){
 221         Ext.apply(this, config);
 222
 223         if(Ext.isString(this.renderer)){
 224             this.renderer = Ext.util.Format[this.renderer];
 225         }else if(Ext.isObject(this.renderer)){
 226             this.scope = this.renderer.scope;
 227             this.renderer = this.renderer.fn;
 228         }
 229         if(!this.scope){
 230             this.scope = this;
 231         }
 232
 233         var ed = this.editor;
 234         delete this.editor;
 235         this.setEditor(ed);
 236         this.addEvents(
 237             /**
 238              * @event click
 239              * Fires when this Column is clicked.
 240              * @param {Column} this
 241              * @param {Grid} The owning GridPanel
 242              * @param {Number} rowIndex
 243              * @param {Ext.EventObject} e
 244              */
 245             'click',
 246             /**
 247              * @event contextmenu
 248              * Fires when this Column is right clicked.
 249              * @param {Column} this
 250              * @param {Grid} The owning GridPanel
 251              * @param {Number} rowIndex
 252              * @param {Ext.EventObject} e
 253              */
 254             'contextmenu',
 255             /**
 256              * @event dblclick
 257              * Fires when this Column is double clicked.
 258              * @param {Column} this
 259              * @param {Grid} The owning GridPanel
 260              * @param {Number} rowIndex
 261              * @param {Ext.EventObject} e
 262              */
 263             'dblclick',
 264             /**
 265              * @event mousedown
 266              * Fires when this Column receives a mousedown event.
 267              * @param {Column} this
 268              * @param {Grid} The owning GridPanel
 269              * @param {Number} rowIndex
 270              * @param {Ext.EventObject} e
 271              */
 272             'mousedown'
 273         );
 274         Ext.grid.Column.superclass.constructor.call(this);
 275     },
 276
 277     /**
 278      * @private
 279      * Process and refire events routed from the GridView's processEvent method.
 280      * Returns the event handler's status to allow cancelling of GridView's bubbling process.
 281      */
 282     processEvent : function(name, e, grid, rowIndex, colIndex){
 283         return this.fireEvent(name, this, grid, rowIndex, e);
 284     },
 285
 286     /**
 287      * @private
 288      * Clean up. Remove any Editor. Remove any listeners.
 289      */
 290     destroy: function() {
 291         if(this.setEditor){
 292             this.setEditor(null);
 293         }
 294         this.purgeListeners();
 295     },
 296
 297     /**
 298      * Optional. A function which returns displayable data when passed the following parameters:
 299      * <div class="mdetail-params"><ul>
 300      * <li><b>value</b> : Object<p class="sub-desc">The data value for the cell.</p></li>
 301      * <li><b>metadata</b> : Object<p class="sub-desc">An object in which you may set the following attributes:<ul>
 302      * <li><b>css</b> : String<p class="sub-desc">A CSS class name to add to the cell's TD element.</p></li>
 303      * <li><b>attr</b> : String<p class="sub-desc">An HTML attribute definition string to apply to the data container
 304      * element <i>within</i> the table cell (e.g. 'style="color:red;"').</p></li></ul></p></li>
 305      * <li><b>record</b> : Ext.data.record<p class="sub-desc">The {@link Ext.data.Record} from which the data was
 306      * extracted.</p></li>
 307      * <li><b>rowIndex</b> : Number<p class="sub-desc">Row index</p></li>
 308      * <li><b>colIndex</b> : Number<p class="sub-desc">Column index</p></li>
 309      * <li><b>store</b> : Ext.data.Store<p class="sub-desc">The {@link Ext.data.Store} object from which the Record
 310      * was extracted.</p></li>
 311      * </ul></div>
 312      * @property renderer
 313      * @type Function
 314      */
 315     renderer : function(value){
 316         return value;
 317     },
 318
 319     // private
 320     getEditor: function(rowIndex){
 321         return this.editable !== false ? this.editor : null;
 322     },
 323
 324     /**
 325      * Sets a new editor for this column.
 326      * @param {Ext.Editor/Ext.form.Field} editor The editor to set
 327      */
 328     setEditor : function(editor){
 329         var ed = this.editor;
 330         if(ed){
 331             if(ed.gridEditor){
 332                 ed.gridEditor.destroy();
 333                 delete ed.gridEditor;
 334             }else{
 335                 ed.destroy();
 336             }
 337         }
 338         this.editor = null;
 339         if(editor){
 340             //not an instance, create it
 341             if(!editor.isXType){
 342                 editor = Ext.create(editor, 'textfield');
 343             }
 344             this.editor = editor;
 345         }
 346     },
 347
 348     /**
 349      * Returns the {@link Ext.Editor editor} defined for this column that was created to wrap the {@link Ext.form.Field Field}
 350      * used to edit the cell.
 351      * @param {Number} rowIndex The row index
 352      * @return {Ext.Editor}
 353      */
 354     getCellEditor: function(rowIndex){
 355         var ed = this.getEditor(rowIndex);
 356         if(ed){
 357             if(!ed.startEdit){
 358                 if(!ed.gridEditor){
 359                     ed.gridEditor = new Ext.grid.GridEditor(ed);
 360                 }
 361                 ed = ed.gridEditor;
 362             }
 363         }
 364         return ed;
 365     }
 366 });
 367
 368 /**
 369  * @class Ext.grid.BooleanColumn
 370  * @extends Ext.grid.Column
 371  * <p>A Column definition class which renders boolean data fields.  See the {@link Ext.grid.Column#xtype xtype}
 372  * config option of {@link Ext.grid.Column} for more details.</p>
 373  */
 374 Ext.grid.BooleanColumn = Ext.extend(Ext.grid.Column, {
 375     /**
 376      * @cfg {String} trueText
 377      * The string returned by the renderer when the column value is not falsy (defaults to <tt>'true'</tt>).
 378      */
 379     trueText: 'true',
 380     /**
 381      * @cfg {String} falseText
 382      * The string returned by the renderer when the column value is falsy (but not undefined) (defaults to
 383      * <tt>'false'</tt>).
 384      */
 385     falseText: 'false',
 386     /**
 387      * @cfg {String} undefinedText
 388      * The string returned by the renderer when the column value is undefined (defaults to <tt>'&amp;#160;'</tt>).
 389      */
 390     undefinedText: '&#160;',
 391
 392     constructor: function(cfg){
 393         Ext.grid.BooleanColumn.superclass.constructor.call(this, cfg);
 394         var t = this.trueText, f = this.falseText, u = this.undefinedText;
 395         this.renderer = function(v){
 396             if(v === undefined){
 397                 return u;
 398             }
 399             if(!v || v === 'false'){
 400                 return f;
 401             }
 402             return t;
 403         };
 404     }
 405 });
 406
 407 /**
 408  * @class Ext.grid.NumberColumn
 409  * @extends Ext.grid.Column
 410  * <p>A Column definition class which renders a numeric data field according to a {@link #format} string.  See the
 411  * {@link Ext.grid.Column#xtype xtype} config option of {@link Ext.grid.Column} for more details.</p>
 412  */
 413 Ext.grid.NumberColumn = Ext.extend(Ext.grid.Column, {
 414     /**
 415      * @cfg {String} format
 416      * A formatting string as used by {@link Ext.util.Format#number} to format a numeric value for this Column
 417      * (defaults to <tt>'0,000.00'</tt>).
 418      */
 419     format : '0,000.00',
 420     constructor: function(cfg){
 421         Ext.grid.NumberColumn.superclass.constructor.call(this, cfg);
 422         this.renderer = Ext.util.Format.numberRenderer(this.format);
 423     }
 424 });
 425
 426 /**
 427  * @class Ext.grid.DateColumn
 428  * @extends Ext.grid.Column
 429  * <p>A Column definition class which renders a passed date according to the default locale, or a configured
 430  * {@link #format}. See the {@link Ext.grid.Column#xtype xtype} config option of {@link Ext.grid.Column}
 431  * for more details.</p>
 432  */
 433 Ext.grid.DateColumn = Ext.extend(Ext.grid.Column, {
 434     /**
 435      * @cfg {String} format
 436      * A formatting string as used by {@link Date#format} to format a Date for this Column
 437      * (defaults to <tt>'m/d/Y'</tt>).
 438      */
 439     format : 'm/d/Y',
 440     constructor: function(cfg){
 441         Ext.grid.DateColumn.superclass.constructor.call(this, cfg);
 442         this.renderer = Ext.util.Format.dateRenderer(this.format);
 443     }
 444 });
 445
 446 /**
 447  * @class Ext.grid.TemplateColumn
 448  * @extends Ext.grid.Column
 449  * <p>A Column definition class which renders a value by processing a {@link Ext.data.Record Record}'s
 450  * {@link Ext.data.Record#data data} using a {@link #tpl configured} {@link Ext.XTemplate XTemplate}.
 451  * See the {@link Ext.grid.Column#xtype xtype} config option of {@link Ext.grid.Column} for more
 452  * details.</p>
 453  */
 454 Ext.grid.TemplateColumn = Ext.extend(Ext.grid.Column, {
 455     /**
 456      * @cfg {String/XTemplate} tpl
 457      * An {@link Ext.XTemplate XTemplate}, or an XTemplate <i>definition string</i> to use to process a
 458      * {@link Ext.data.Record Record}'s {@link Ext.data.Record#data data} to produce a column's rendered value.
 459      */
 460     constructor: function(cfg){
 461         Ext.grid.TemplateColumn.superclass.constructor.call(this, cfg);
 462         var tpl = (!Ext.isPrimitive(this.tpl) && this.tpl.compile) ? this.tpl : new Ext.XTemplate(this.tpl);
 463         this.renderer = function(value, p, r){
 464             return tpl.apply(r.data);
 465         };
 466         this.tpl = tpl;
 467     }
 468 });
 469
 470 /**
 471  * @class Ext.grid.ActionColumn
 472  * @extends Ext.grid.Column
 473  * <p>A Grid column type which renders an icon, or a series of icons in a grid cell, and offers a scoped click
 474  * handler for each icon. Example usage:</p>
 475 <pre><code>
 476 new Ext.grid.GridPanel({
 477     store: myStore,
 478     columns: [
 479         {
 480             xtype: 'actioncolumn',
 481             width: 50,
 482             items: [
 483                 {
 484                     icon   : 'sell.gif',                // Use a URL in the icon config
 485                     tooltip: 'Sell stock',
 486                     handler: function(grid, rowIndex, colIndex) {
 487                         var rec = store.getAt(rowIndex);
 488                         alert("Sell " + rec.get('company'));
 489                     }
 490                 },
 491                 {
 492                     getClass: function(v, meta, rec) {  // Or return a class from a function
 493                         if (rec.get('change') < 0) {
 494                             this.items[1].tooltip = 'Do not buy!';
 495                             return 'alert-col';
 496                         } else {
 497                             this.items[1].tooltip = 'Buy stock';
 498                             return 'buy-col';
 499                         }
 500                     },
 501                     handler: function(grid, rowIndex, colIndex) {
 502                         var rec = store.getAt(rowIndex);
 503                         alert("Buy " + rec.get('company'));
 504                     }
 505                 }
 506             ]
 507         }
 508         //any other columns here
 509     ]
 510 });
 511 </pre></code>
 512  * <p>The action column can be at any index in the columns array, and a grid can have any number of
 513  * action columns. </p>
 514  */
 515 Ext.grid.ActionColumn = Ext.extend(Ext.grid.Column, {
 516     /**
 517      * @cfg {String} icon
 518      * The URL of an image to display as the clickable element in the column.
 519      * Optional - defaults to <code>{@link Ext#BLANK_IMAGE_URL Ext.BLANK_IMAGE_URL}</code>.
 520      */
 521     /**
 522      * @cfg {String} iconCls
 523      * A CSS class to apply to the icon image. To determine the class dynamically, configure the Column with a <code>{@link #getClass}</code> function.
 524      */
 525     /**
 526      * @cfg {Function} handler A function called when the icon is clicked.
 527      * The handler is passed the following parameters:<div class="mdetail-params"><ul>
 528      * <li><code>grid</code> : GridPanel<div class="sub-desc">The owning GridPanel.</div></li>
 529      * <li><code>rowIndex</code> : Number<div class="sub-desc">The row index clicked on.</div></li>
 530      * <li><code>colIndex</code> : Number<div class="sub-desc">The column index clicked on.</div></li>
 531      * <li><code>item</code> : Object<div class="sub-desc">The clicked item (or this Column if multiple
 532      * {@link #items} were not configured).</div></li>
 533      * <li><code>e</code> : Event<div class="sub-desc">The click event.</div></li>
 534      * </ul></div>
 535      */
 536     /**
 537      * @cfg {Object} scope The scope (<tt><b>this</b></tt> reference) in which the <code>{@link #handler}</code>
 538      * and <code>{@link #getClass}</code> fuctions are executed. Defaults to this Column.
 539      */
 540     /**
 541      * @cfg {String} tooltip A tooltip message to be displayed on hover. {@link Ext.QuickTips#init Ext.QuickTips} must have
 542      * been initialized.
 543      */
 544     /**
 545      * @cfg {Boolean} stopSelection Defaults to <code>true</code>. Prevent grid <i>row</i> selection upon mousedown.
 546      */
 547     /**
 548      * @cfg {Function} getClass A function which returns the CSS class to apply to the icon image.
 549      * The function is passed the following parameters:<div class="mdetail-params"><ul>
 550      *     <li><b>v</b> : Object<p class="sub-desc">The value of the column's configured field (if any).</p></li>
 551      *     <li><b>metadata</b> : Object<p class="sub-desc">An object in which you may set the following attributes:<ul>
 552      *         <li><b>css</b> : String<p class="sub-desc">A CSS class name to add to the cell's TD element.</p></li>
 553      *         <li><b>attr</b> : String<p class="sub-desc">An HTML attribute definition string to apply to the data container element <i>within</i> the table cell
 554      *         (e.g. 'style="color:red;"').</p></li>
 555      *     </ul></p></li>
 556      *     <li><b>r</b> : Ext.data.Record<p class="sub-desc">The Record providing the data.</p></li>
 557      *     <li><b>rowIndex</b> : Number<p class="sub-desc">The row index..</p></li>
 558      *     <li><b>colIndex</b> : Number<p class="sub-desc">The column index.</p></li>
 559      *     <li><b>store</b> : Ext.data.Store<p class="sub-desc">The Store which is providing the data Model.</p></li>
 560      * </ul></div>
 561      */
 562     /**
 563      * @cfg {Array} items An Array which may contain multiple icon definitions, each element of which may contain:
 564      * <div class="mdetail-params"><ul>
 565      * <li><code>icon</code> : String<div class="sub-desc">The url of an image to display as the clickable element
 566      * in the column.</div></li>
 567      * <li><code>iconCls</code> : String<div class="sub-desc">A CSS class to apply to the icon image.
 568      * To determine the class dynamically, configure the item with a <code>getClass</code> function.</div></li>
 569      * <li><code>getClass</code> : Function<div class="sub-desc">A function which returns the CSS class to apply to the icon image.
 570      * The function is passed the following parameters:<ul>
 571      *     <li><b>v</b> : Object<p class="sub-desc">The value of the column's configured field (if any).</p></li>
 572      *     <li><b>metadata</b> : Object<p class="sub-desc">An object in which you may set the following attributes:<ul>
 573      *         <li><b>css</b> : String<p class="sub-desc">A CSS class name to add to the cell's TD element.</p></li>
 574      *         <li><b>attr</b> : String<p class="sub-desc">An HTML attribute definition string to apply to the data container element <i>within</i> the table cell
 575      *         (e.g. 'style="color:red;"').</p></li>
 576      *     </ul></p></li>
 577      *     <li><b>r</b> : Ext.data.Record<p class="sub-desc">The Record providing the data.</p></li>
 578      *     <li><b>rowIndex</b> : Number<p class="sub-desc">The row index..</p></li>
 579      *     <li><b>colIndex</b> : Number<p class="sub-desc">The column index.</p></li>
 580      *     <li><b>store</b> : Ext.data.Store<p class="sub-desc">The Store which is providing the data Model.</p></li>
 581      * </ul></div></li>
 582      * <li><code>handler</code> : Function<div class="sub-desc">A function called when the icon is clicked.</div></li>
 583      * <li><code>scope</code> : Scope<div class="sub-desc">The scope (<code><b>this</b></code> reference) in which the
 584      * <code>handler</code> and <code>getClass</code> functions are executed. Fallback defaults are this Column's
 585      * configured scope, then this Column.</div></li>
 586      * <li><code>tooltip</code> : String<div class="sub-desc">A tooltip message to be displayed on hover.
 587      * {@link Ext.QuickTips#init Ext.QuickTips} must have been initialized.</div></li>
 588      * </ul></div>
 589      */
 590     header: '&#160;',
 591
 592     actionIdRe: /x-action-col-(\d+)/,
 593
 594     /**
 595      * @cfg {String} altText The alt text to use for the image element. Defaults to <tt>''</tt>.
 596      */
 597     altText: '',
 598
 599     constructor: function(cfg) {
 600         var me = this,
 601             items = cfg.items || (me.items = [me]),
 602             l = items.length,
 603             i,
 604             item;
 605
 606         Ext.grid.ActionColumn.superclass.constructor.call(me, cfg);
 607
 608 //      Renderer closure iterates through items creating an <img> element for each and tagging with an identifying
 609 //      class name x-action-col-{n}
 610         me.renderer = function(v, meta) {
 611 //          Allow a configured renderer to create initial value (And set the other values in the "metadata" argument!)
 612             v = Ext.isFunction(cfg.renderer) ? cfg.renderer.apply(this, arguments)||'' : '';
 613
 614             meta.css += ' x-action-col-cell';
 615             for (i = 0; i < l; i++) {
 616                 item = items[i];
 617                 v += '<img alt="' + me.altText + '" src="' + (item.icon || Ext.BLANK_IMAGE_URL) +
 618                     '" class="x-action-col-icon x-action-col-' + String(i) + ' ' + (item.iconCls || '') +
 619                     ' ' + (Ext.isFunction(item.getClass) ? item.getClass.apply(item.scope||this.scope||this, arguments) : '') + '"' +
 620                     ((item.tooltip) ? ' ext:qtip="' + item.tooltip + '"' : '') + ' />';
 621             }
 622             return v;
 623         };
 624     },
 625
 626     destroy: function() {
 627         delete this.items;
 628         delete this.renderer;
 629         return Ext.grid.ActionColumn.superclass.destroy.apply(this, arguments);
 630     },
 631
 632     /**
 633      * @private
 634      * Process and refire events routed from the GridView's processEvent method.
 635      * Also fires any configured click handlers. By default, cancels the mousedown event to prevent selection.
 636      * Returns the event handler's status to allow cancelling of GridView's bubbling process.
 637      */
 638     processEvent : function(name, e, grid, rowIndex, colIndex){
 639         var m = e.getTarget().className.match(this.actionIdRe),
 640             item, fn;
 641         if (m && (item = this.items[parseInt(m[1], 10)])) {
 642             if (name == 'click') {
 643                 (fn = item.handler || this.handler) && fn.call(item.scope||this.scope||this, grid, rowIndex, colIndex, item, e);
 644             } else if ((name == 'mousedown') && (item.stopSelection !== false)) {
 645                 return false;
 646             }
 647         }
 648         return Ext.grid.ActionColumn.superclass.processEvent.apply(this, arguments);
 649     }
 650 });
 651
 652 /*
 653  * @property types
 654  * @type Object
 655  * @member Ext.grid.Column
 656  * @static
 657  * <p>An object containing predefined Column classes keyed by a mnemonic code which may be referenced
 658  * by the {@link Ext.grid.ColumnModel#xtype xtype} config option of ColumnModel.</p>
 659  * <p>This contains the following properties</p><div class="mdesc-details"><ul>
 660  * <li>gridcolumn : <b>{@link Ext.grid.Column Column constructor}</b></li>
 661  * <li>booleancolumn : <b>{@link Ext.grid.BooleanColumn BooleanColumn constructor}</b></li>
 662  * <li>numbercolumn : <b>{@link Ext.grid.NumberColumn NumberColumn constructor}</b></li>
 663  * <li>datecolumn : <b>{@link Ext.grid.DateColumn DateColumn constructor}</b></li>
 664  * <li>templatecolumn : <b>{@link Ext.grid.TemplateColumn TemplateColumn constructor}</b></li>
 665  * </ul></div>
 666  */
 667 Ext.grid.Column.types = {
 668     gridcolumn : Ext.grid.Column,
 669     booleancolumn: Ext.grid.BooleanColumn,
 670     numbercolumn: Ext.grid.NumberColumn,
 671     datecolumn: Ext.grid.DateColumn,
 672     templatecolumn: Ext.grid.TemplateColumn,
 673     actioncolumn: Ext.grid.ActionColumn
 674 };