Recently we had a client who wanted to display boolean data in their grid as checkboxes. At first we tried the checkbox selection model, and that worked all right for one column, but not for multiples. So here is a quick and dirty checkbox column that has nothing to do with selecting. Enjoy!

PHP Code:
Ext.define('Ext.ux.grid.column.CheckBox', {
  
extend'Ext.grid.column.Template',
  
alias'widget.checkboxcolumn',
  
constructor: function(cfg) {
    var 
me this;
    
me.tpl = ['<tpl for=".">','placeholder','</tpl>']; // shouldn't
    // ever be used. Ignore it.
    
var tplChecked Ext.create('Ext.XTemplate', [
      
'<tpl for=".">',
      
'<div class="x-field x-form-item x-field-default x-form-cb-checked">',
      
'<div class="x-form-item-body x-form-cb-wrap" role="presentation">',
      
'<input class="x-form-field x-form-checkbox" type="button" hidefocus="true" autocomplete="off" aria-checked="false" aria-invalid="false" role="checkbox" data-errorqtip="">',
      
'</div>',
      
'</div>',
      
'</tpl>'
    
]);
    var 
tplUnchecked Ext.create('Ext.XTemplate', [
      
'<tpl for=".">',
      
'<div class="x-field x-form-item x-field-default">',
      
'<div class="x-form-item-body x-form-cb-wrap" role="presentation">',
      
'<input class="x-form-field x-form-checkbox" type="button" hidefocus="true" autocomplete="off" aria-checked="false" aria-invalid="false" role="checkbox" data-errorqtip="">',
      
'</div>',
      
'</div>',
      
'</tpl>'
    
]);

    
me.callParent(arguments);
    
me.renderer = function(valueprecord) {
      var 
data Ext.apply({}, record.datarecord.getAssociatedData());
      if (
data[me.dataIndex]) {
        return 
tplChecked.apply(data);
      } else {
        return 
tplUnchecked.apply(data);
      }
    };

  },
    
processEvent : function(typeviewcellrecordIndexcellIndexe){
      var 
me this;
      if (
type == 'click') {
        var 
rec view.getStore().getAt(recordIndex);
        
rec.set(this.dataIndex, (rec.get(this.dataIndex))?false:true);
      } else if (
type == 'mousedown') {
        return 
false;
      }
      return 
me.callParent(arguments);
    }
}); 
And an example:

PHP Code:
Ext.define('GridItem', {
  
extend'Ext.data.Model',
  
fields: [
    { 
name'id'type'int' },
    { 
name'name'type'string' },
    { 
name'foo'type'boolean' },
    { 
name'bar'type'boolean' },
    { 
name'baz'type'boolean' },
    { 
name'ding'type'boolean' }
    ]
  });

Ext.create('Ext.data.Store', {
  
storeId'gridStore',
  
model'GridItem',
  
data:{
    
'items': [
      { 
id1name'Test 1'footruebarfalsebaztruedingfalse },
      { 
id2name'Test 2'foofalsebarfalsebaztruedingfalse },
      { 
id3name'Test 3'footruebarfalsebaztruedingtrue },
      { 
id4name'Test 4'foofalsebarfalsebaztruedingfalse }
    ]
  },
  
proxy: {
        
type'memory',
        
reader: {
            
type'json',
            
root'items'
        
}
  }
});

Ext.create('Ext.grid.Panel', {
    
title'Checkbox Column Test',
    
storeExt.data.StoreManager.lookup('gridStore'),
    
columns: [
      {
header'Name',  dataIndex'name'flex1},
      {
header'Foo'dataIndex'foo'xtype'checkboxcolumn'width32 },
      {
header'Bar'dataIndex'bar'xtype'checkboxcolumn'width32 },
      {
header'Baz'dataIndex'baz'xtype'checkboxcolumn'width32 },
      {
header'Ding'dataIndex'ding'xtype'checkboxcolumn'width32 }
    ],
    
height200,
    
width400,
    
renderToExt.getBody()
});