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:
** 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 '// 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 ... }); *
'; } }; // register ptype Ext.preg('checkcolumn', Ext.ux.grid.CheckColumn); // backwards compat Ext.grid.CheckColumn = Ext.ux.grid.CheckColumn;