Ext.ux.grid.CheckboxColumn

[tcl_java]

Demo here
Download

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

/**
 * A Column definition class which renders enum data fields.
 * @class Ext.ux.grid.CheckboxColumn
 * @extends Ext.grid.Column
 * @author Tran Cong Ly - tcl_java@yahoo.com - http://5cent.net
 * Create the column:
 *   
var cm = new Ext.grid.ColumnModel([
new Ext.ux.grid.CheckboxColumn({
    header: 'Header #1',
    dataIndex: 'field_name_1'
},
{
    xtype: 'checkboxcolumn',
    header: 'Header #2',
    dataIndex: 'field_name_2',
    on: 1,
    off: 0
},
{
    xtype: 'checkboxcolumn',
    header: 'Header #3',
    dataIndex: 'field_name_3',
    on: 'abc',
    off: 'def'
}])
 
 */
Ext.ux.grid.CheckboxColumn = Ext.extend(Ext.grid.Column, {
    on: true,
    off: false,
    constructor: function (cfg) {
        Ext.ux.grid.CheckboxColumn.superclass.constructor.call(this, cfg);
        this.editor = new Ext.form.Field();
        var cellEditor = this.getCellEditor(),
            on = this.on,
            off = this.off;
        cellEditor.on('startedit', function (el, v) {
            cellEditor.setValue(String(v) == String(on) ? off : on);
            cellEditor.hide();
        });
        this.renderer = function (value, metaData, record, rowIndex, colIndex, store) {
            metaData.css += ' x-grid3-check-col-td';
            return '<div class="x-grid3-check-col' + (String(value) == String(on) ? '-on' : '') + '"></div>';
        }
    }
});
Ext.grid.Column.types['checkboxcolumn'] = Ext.ux.grid.CheckboxColumn; 

[sis9]

use this:

this.editor = new Ext.grid.GridEditor(new Ext.form.Field());

instead of:

this.editor = new Ext.form.Field();

btw.thank you for sharing this code!

[hakonvik]

Or even better:

this.editor = new Ext.grid.GridEditor(new Ext.form.Checkbox());

[sis9]

if defined "on" and "off" parameters are others then true or false than you should use

this.editor = new Ext.grid.GridEditor(new Ext.form.Field());

if defined "on" and "off" parameters are default true or false,
and you do not want to see editor field, than use

this.editor = new Ext.grid.GridEditor(new Ext.form.Checkbox());

[tcl_java]

if defined "on" and "off" parameters are others then true or false than you should use

this.editor = new Ext.grid.GridEditor(new Ext.form.Field());

if defined "on" and "off" parameters are default true or false,
and you do not want to see editor field, than use

this.editor = new Ext.grid.GridEditor(new Ext.form.Checkbox());

use this:

this.editor = new Ext.grid.GridEditor(new Ext.form.Field());

instead of:

this.editor = new Ext.form.Field();

btw.thank you for sharing this code!

Thank so much!
I will change it
& sorry for my reply late

[sis9]

[binoruv]

greate job, that helps me a lot!

thanks tcl_java

[talha06]

this is really very useful extension.. Thanks a lot for sharing tcl_java.