Ext.ux.grid.column.Checkbox

[bpjohnson]

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!



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(value, p, record) {
var data = Ext.apply({}, record.data, record.getAssociatedData());
if (data[me.dataIndex]) {
return tplChecked.apply(data);
} else {
return tplUnchecked.apply(data);
}
};

},
processEvent : function(type, view, cell, recordIndex, cellIndex, e){
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:



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': [
{ id: 1, name: 'Test 1', foo: true, bar: false, baz: true, ding: false },
{ id: 2, name: 'Test 2', foo: false, bar: false, baz: true, ding: false },
{ id: 3, name: 'Test 3', foo: true, bar: false, baz: true, ding: true },
{ id: 4, name: 'Test 4', foo: false, bar: false, baz: true, ding: false }
]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

Ext.create('Ext.grid.Panel', {
title: 'Checkbox Column Test',
store: Ext.data.StoreManager.lookup('gridStore'),
columns: [
{header: 'Name', dataIndex: 'name', flex: 1},
{header: 'Foo', dataIndex: 'foo', xtype: 'checkboxcolumn', width: 32 },
{header: 'Bar', dataIndex: 'bar', xtype: 'checkboxcolumn', width: 32 },
{header: 'Baz', dataIndex: 'baz', xtype: 'checkboxcolumn', width: 32 },
{header: 'Ding', dataIndex: 'ding', xtype: 'checkboxcolumn', width: 32 }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});

[jonaldomo]

What makes it different from Ext.ux.CheckColumn as seen here: http://dev.sencha.com/deploy/ext-4.0.2a/examples/grid/cell-editing.html?

Thanks.

[bpjohnson]

What makes it different from Ext.ux.CheckColumn as seen here: http://dev.sencha.com/deploy/ext-4.0.2a/examples/grid/cell-editing.html?

Apparently not much. That'll teach me to read through all of the uxes in the distribution before going off and writing my own.

[jonaldomo]

I still appreciate people like you submitting their work in, I was just curious if there was some functionality that I was missing.

[bpjohnson]

I still appreciate people like you submitting their work in, I was just curious if there was some functionality that I was missing.

Thanks. It actually did help me learn a bit more about the guts of grids in Ext4. I suppose the only difference is the version in examples requires external CSS, and mine does not as it piggybacks on the form field checkbox CSS.