examples/ux/CheckColumn.js

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