examples/ux/CheckColumn.js

   1 /*!
   2  * Ext JS Library 3.0.0
   3  * Copyright(c) 2006-2009 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Ext.ns('Ext.ux.grid');\r
   8 \r
   9 /**\r
  10  * @class Ext.ux.grid.CheckColumn\r
  11  * @extends Object\r
  12  * GridPanel plugin to add a column with check boxes to a grid.\r
  13  * <p>Example usage:</p>\r
  14  * <pre><code>\r
  15 // create the column\r
  16 var checkColumn = new Ext.grid.CheckColumn({\r
  17    header: 'Indoor?',\r
  18    dataIndex: 'indoor',\r
  19    id: 'check',\r
  20    width: 55\r
  21 });\r
  22 \r
  23 // add the column to the column model\r
  24 var cm = new Ext.grid.ColumnModel([{\r
  25        header: 'Foo',\r
  26        ...\r
  27     },\r
  28     checkColumn\r
  29 ]);\r
  30 \r
  31 // create the grid\r
  32 var grid = new Ext.grid.EditorGridPanel({\r
  33     ...\r
  34     cm: cm,\r
  35     plugins: [checkColumn], // include plugin\r
  36     ...\r
  37 });\r
  38  * </code></pre>\r
  39  * In addition to storing a Boolean value within the record data, this\r
  40  * class toggles a css class between <tt>'x-grid3-check-col'</tt> and\r
  41  * <tt>'x-grid3-check-col-on'</tt> to alter the background image used for\r
  42  * a column.\r
  43  */\r
  44 Ext.ux.grid.CheckColumn = function(config){\r
  45     Ext.apply(this, config);\r
  46     if(!this.id){\r
  47         this.id = Ext.id();\r
  48     }\r
  49     this.renderer = this.renderer.createDelegate(this);\r
  50 };\r
  51 \r
  52 Ext.ux.grid.CheckColumn.prototype ={\r
  53     init : function(grid){\r
  54         this.grid = grid;\r
  55         this.grid.on('render', function(){\r
  56             var view = this.grid.getView();\r
  57             view.mainBody.on('mousedown', this.onMouseDown, this);\r
  58         }, this);\r
  59     },\r
  60 \r
  61     onMouseDown : function(e, t){\r
  62         if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){\r
  63             e.stopEvent();\r
  64             var index = this.grid.getView().findRowIndex(t);\r
  65             var record = this.grid.store.getAt(index);\r
  66             record.set(this.dataIndex, !record.data[this.dataIndex]);\r
  67         }\r
  68     },\r
  69 \r
  70     renderer : function(v, p, record){\r
  71         p.css += ' x-grid3-check-col-td'; \r
  72         return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'">&#160;</div>';\r
  73     }\r
  74 };\r
  75 \r
  76 // register ptype\r
  77 Ext.preg('checkcolumn', Ext.ux.grid.CheckColumn);\r
  78 \r
  79 // backwards compat\r
  80 Ext.grid.CheckColumn = Ext.ux.grid.CheckColumn;