examples/docs/source/CheckColumn.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>The source code</title>
   5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   7 </head>
   8 <body  onload="prettyPrint();">
   9     <pre class="prettyprint lang-js">/*!
  10  * Ext JS Library 3.3.1
  11  * Copyright(c) 2006-2010 Sencha Inc.
  12  * licensing@sencha.com
  13  * http://www.sencha.com/license
  14  */
  15 Ext.ns('Ext.ux.grid');
  16
  17 /**
  18  * @class Ext.ux.grid.CheckColumn
  19  * @extends Ext.grid.Column
  20  * <p>A Column subclass which renders a checkbox in each column cell which toggles the truthiness of the associated data field on click.</p>
  21  * <p><b>Note. As of ExtJS 3.3 this no longer has to be configured as a plugin of the GridPanel.</b></p>
  22  * <p>Example usage:</p>
  23  * <pre><code>
  24 var cm = new Ext.grid.ColumnModel([{
  25        header: 'Foo',
  26        ...
  27     },{
  28        xtype: 'checkcolumn',
  29        header: 'Indoor?',
  30        dataIndex: 'indoor',
  31        width: 55
  32     }
  33 ]);
  34
  35 // create the grid
  36 var grid = new Ext.grid.EditorGridPanel({
  37     ...
  38     colModel: cm,
  39     ...
  40 });
  41  * </code></pre>
  42  * In addition to toggling a Boolean value within the record data, this
  43  * class toggles a css class between <tt>'x-grid3-check-col'</tt> and
  44  * <tt>'x-grid3-check-col-on'</tt> to alter the background image used for
  45  * a column.
  46  */
  47 Ext.ux.grid.CheckColumn = Ext.extend(Ext.grid.Column, {
  48
  49     /**
  50      * @private
  51      * Process and refire events routed from the GridView's processEvent method.
  52      */
  53     processEvent : function(name, e, grid, rowIndex, colIndex){
  54         if (name == 'mousedown') {
  55             var record = grid.store.getAt(rowIndex);
  56             record.set(this.dataIndex, !record.data[this.dataIndex]);
  57             return false; // Cancel row selection.
  58         } else {
  59             return Ext.grid.ActionColumn.superclass.processEvent.apply(this, arguments);
  60         }
  61     },
  62
  63     renderer : function(v, p, record){
  64         p.css += ' x-grid3-check-col-td';
  65         return String.format('<div class="x-grid3-check-col{0}">&#160;</div>', v ? '-on' : '');
  66     },
  67
  68     // Deprecate use as a plugin. Remove in 4.0
  69     init: Ext.emptyFn
  70 });
  71
  72 // register ptype. Deprecate. Remove in 4.0
  73 Ext.preg('checkcolumn', Ext.ux.grid.CheckColumn);
  74
  75 // backwards compat. Remove in 4.0
  76 Ext.grid.CheckColumn = Ext.ux.grid.CheckColumn;
  77
  78 // register Column xtype
  79 Ext.grid.Column.types.checkcolumn = Ext.ux.grid.CheckColumn;</pre>
  80 </body>
  81 </html>