examples/ux/CheckColumn.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 Ext.ns('Ext.ux.grid');
   8
   9 /**
  10  * @class Ext.ux.grid.CheckColumn
  11  * @extends Ext.grid.Column
  12  * <p>A Column subclass which renders a checkbox in each column cell which toggles the truthiness of the associated data field on click.</p>
  13  * <p><b>Note. As of ExtJS 3.3 this no longer has to be configured as a plugin of the GridPanel.</b></p>
  14  * <p>Example usage:</p>
  15  * <pre><code>
  16 var cm = new Ext.grid.ColumnModel([{
  17        header: 'Foo',
  18        ...
  19     },{
  20        xtype: 'checkcolumn',
  21        header: 'Indoor?',
  22        dataIndex: 'indoor',
  23        width: 55
  24     }
  25 ]);
  26
  27 // create the grid
  28 var grid = new Ext.grid.EditorGridPanel({
  29     ...
  30     colModel: cm,
  31     ...
  32 });
  33  * </code></pre>
  34  * In addition to toggling a Boolean value within the record data, this
  35  * class toggles a css class between <tt>'x-grid3-check-col'</tt> and
  36  * <tt>'x-grid3-check-col-on'</tt> to alter the background image used for
  37  * a column.
  38  */
  39 Ext.ux.grid.CheckColumn = Ext.extend(Ext.grid.Column, {
  40
  41     /**
  42      * @private
  43      * Process and refire events routed from the GridView's processEvent method.
  44      */
  45     processEvent : function(name, e, grid, rowIndex, colIndex){
  46         if (name == 'mousedown') {
  47             var record = grid.store.getAt(rowIndex);
  48             record.set(this.dataIndex, !record.data[this.dataIndex]);
  49             return false; // Cancel row selection.
  50         } else {
  51             return Ext.grid.ActionColumn.superclass.processEvent.apply(this, arguments);
  52         }
  53     },
  54
  55     renderer : function(v, p, record){
  56         p.css += ' x-grid3-check-col-td';
  57         return String.format('<div class="x-grid3-check-col{0}">&#160;</div>', v ? '-on' : '');
  58     },
  59
  60     // Deprecate use as a plugin. Remove in 4.0
  61     init: Ext.emptyFn
  62 });
  63
  64 // register ptype. Deprecate. Remove in 4.0
  65 Ext.preg('checkcolumn', Ext.ux.grid.CheckColumn);
  66
  67 // backwards compat. Remove in 4.0
  68 Ext.grid.CheckColumn = Ext.ux.grid.CheckColumn;
  69
  70 // register Column xtype
  71 Ext.grid.Column.types.checkcolumn = Ext.ux.grid.CheckColumn;