docs/source/CheckColumn.html

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