Override GridPanel/ColumnModel: Colunas Checkbox

Testado apenas no ExtJS 3.X.

Bom, mais uma contribuição pra comunidade.

Este override permite criar colunas com checkbox facilmente em um grid, basta a coluna estar ligada a um campo booleano e ter a propriedade checkbox:true, para tornar esta coluna editável basta atribuir a propriedade editor:true para a mesma.

Sem mais delongas vamos ao código:

Override:

Ext.override(Ext.grid.ColumnModel, {
	setConfig: Ext.grid.ColumnModel.prototype.setConfig.createSequence(function(config, initial){
		for(var i = 0, len = config.length; i < len; i++){
			var c = config[i];
			if(c.checkbox){
				c.id = c.dataIndex;
				c.align = c.align || 'center';
				if(c.editor){
					c.renderer = this.rendererCheckEditable;
				}else{
					c.renderer = this.rendererCheck;
				}
			}
		}
	}),
	rendererCheck: function(v, p, record){
		p.css += ' x-grid3-check-col-td';
		return '<div class="x-grid3-check-col' + (v ? '-on' : '') + ' x-grid3-col-' + this.id + '" idCol="'+this.id+'" editable="false">&#160;</div>';
	},
	rendererCheckEditable: function(v, p, record){
		p.css += ' x-grid3-check-col-td';
		return '<div class="x-grid3-check-col' + (v ? '-on' : '') + ' x-grid3-col-' + this.id + '" idCol="'+this.id+'" editable="true">&#160;</div>';
	},
	onMouseDown: function(e, t){
		if (t.className && t.className.indexOf('x-grid3-check-col') != -1) {
			e.stopEvent();
			if(t.getAttribute('editable')=='true'){
				var index = this.grid.getView().findRowIndex(t);
				var record = this.grid.store.getAt(index);
				var idCol = t.getAttribute('idcol');
				record.set(idCol, !record.data[idCol]);
				var o = {
					grid: this.grid,
					record: record,
					field: idCol,
					value: record.data[idCol],
					originalValue: !record.data[idCol],
					row: index,
					column: this.grid.getView().findHeaderIndex(t)
				}
				this.grid.fireEvent('afteredit', o);
			}
		}
	}
})

Ext.override(Ext.grid.GridPanel, {
	onRender: Ext.grid.GridPanel.prototype.onRender.createSequence(function(ct, position){
		this.colModel.grid = this;
		if(this.isEditor){
			var view = this.getView();
			view.mainBody.on('mousedown', this.colModel.onMouseDown, this.colModel);
		}
		var view = this.getView();
		var hmenu = view.hmenu;
		if (!view.menuCheck){
			view.sep  = hmenu.addSeparator();
			view.menuCheck = hmenu.add({
				text: 'Marcar Todos',
				itemId: 'selectAll',
				iconCls: 'x-grid3-check-col-on',
				scope: this,
				handler: function(){
					this.getStore().data.each(function(item){
						item.set(view.cm.config[view.hdCtxIndex].dataIndex, true);
					})
				}
			});
			view.menuUnCheck = hmenu.add({
				text: 'Desmarcar Todos',
				itemId: 'unselectAll',
				iconCls: 'x-grid3-check-col',
				scope: this,
				handler: function(){
					this.getStore().data.each(function(item){
						item.set(view.cm.config[view.hdCtxIndex].dataIndex, false);
					})
				}
			});
		}
		hmenu.on('beforeshow', function(){
			var visible = view.cm.config[view.hdCtxIndex].checkbox && view.cm.config[view.hdCtxIndex].editor;
			view.menuCheck.setVisible(visible);
			view.menuUnCheck.setVisible(visible);
			view.sep.setVisible(visible);
		}, this);
	})
})

Exemplo:

Ext.onReady(function(){

	var win = new Ext.Window({
		height: 240,
		width: 620,
		layout: 'fit',
		title: 'Override GridPanel/ColumnModel, Colunas Checkbox',
		items:[{
			xtype: 'editorgrid',
			labelWidth: 60,
			store: new Ext.data.ArrayStore({
				fields: [
					'nome',
					{name:'ativo'   , type:'bool'},
					{name:'politico', type:'bool'},
					{name:'corrupto', type:'bool'}
				],
				data: [
					['João'     , true , true, true],
					['Zé'       , false, true, true],
					['Chico'    , true , true, true],
					['Aureliano', true , true, true],
					['Zulu'     , true , true, false]
				]
			}),
			columns:[
				{dataIndex:'nome'    , header:'Nome'},
				{dataIndex:'ativo'   , header:'Ativo'   , checkbox:true, editor:true},
				{dataIndex:'politico', header:'Político', checkbox:true, editor:false},
				{dataIndex:'corrupto', header:'Corrupto', checkbox:true, editor:true}
			],
			listeners:{
				afteredit:function(o){
					//Evento disparado ao fim da edição de qualquer campo no grid.
				}
			}
		}],
		buttons:[{
			text:'Salvar'
		},{
			text:'Cancelar'
		}]
	})
	win.show();
})

Exemplo Online

ZIP Com os Arquivos

• 17/02/2010 -- Criando um CRUD usando um GRID e um FORM em 3 Partes (0)
• 14/01/2010 -- Ext.ux.form.RCheckbox – Valor de envio configurável (0)
• 25/11/2009 -- Form Override: Criando colunas facilmente [ExtJS 3.0.X] (0)
• 12/02/2010 -- Gadget do fórum Brasileiro de ExtJS para Win Vista/7 (0)
• 10/02/2010 -- Temas bem coloridos pra ExtJS (0)
• 07/12/2009 -- Override Store: Função de validação de dados nos campos (0)
• 06/12/2009 -- Campos Calculados: Criando campos de dados em tempo de execução [ExtJS 3.0.X] (0)
• 27/11/2009 -- Ext.ux.StoreGroup – Carregando Dependências (0)
• 21/12/2010 -- Novidades, mudanças e um novo ano (0)
• 23/03/2010 -- ScreenCast – Instalando o ExtJS (0)