Ext.ns('Ext.ux.grid');

/** * @class Ext.ux.grid.CheckColumn * @extends Object * GridPanel plugin to add a column with check boxes to a grid. *

Example usage:

*

// create the column
var checkColumn = new Ext.grid.CheckColumn({
   header: 'Indoor?',
   dataIndex: 'indoor',
   id: 'check',
   width: 55
});

// add the column to the column model
var cm = new Ext.grid.ColumnModel([{
       header: 'Foo',
       ...
    },
    checkColumn
]);

// create the grid
var grid = new Ext.grid.EditorGridPanel({
    ...
    cm: cm,
    plugins: [checkColumn], // include plugin
    ...
});
 * 
* In addition to storing a Boolean value within the record data, this * class toggles a css class between 'x-grid3-check-col' and * 'x-grid3-check-col-on' to alter the background image used for * a column. */ Ext.ux.grid.CheckColumn = function(config){ Ext.apply(this, config); if(!this.id){ this.id = Ext.id(); } this.renderer = this.renderer.createDelegate(this); }; Ext.ux.grid.CheckColumn.prototype ={ init : function(grid){ this.grid = grid; this.grid.on('render', function(){ var view = this.grid.getView(); view.mainBody.on('mousedown', this.onMouseDown, this); }, this); }, onMouseDown : function(e, t){ if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){ e.stopEvent(); var index = this.grid.getView().findRowIndex(t); var record = this.grid.store.getAt(index); record.set(this.dataIndex, !record.data[this.dataIndex]); } }, renderer : function(v, p, record){ p.css += ' x-grid3-check-col-td'; return '
 
'; } }; // register ptype Ext.preg('checkcolumn', Ext.ux.grid.CheckColumn); // backwards compat Ext.grid.CheckColumn = Ext.ux.grid.CheckColumn;