How to get checkbox in a grid panel?

[vibhakhushi]

Hello all,
How to get a checkbox column in a grid panel? I want to have both normal columns and also a column of checkbox. Finally i read the record row wise not based on the checkbox which is selected. Can i have the grid panel with the above said options?
I'm a newbie in ExtJS and using 2.3 for my project any tutorial to learn that is appreciable. Please help me with some example or tutorial :(

[gits]

here is an example ... have a look at the code there ...

kind regards

[vibhakhushi]

here is an example ... have a look at the code there ...

kind regards

Hello gits... I saw your example. But when i tried it, i got this error...
'Ext.grid.Check Column' [undefined] is not a constructor.

I dont know how to resolve this error :(

[vibhakhushi]

Hello gits... I saw your example. But when i tried it, i got this error...
'Ext.grid.Check Column' [undefined] is not a constructor.

I dont know how to resolve this error :(

Thank You gits... I resolved the error :) As it was a plugin i need to include this also in my code

Ext.grid.CheckColumn = function(config){
    Ext.apply(this, config);
    if(!this.id){
        this.id = Ext.id();
    }
    this.renderer = this.renderer.createDelegate(this);
};

Ext.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 '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';
    }
};

thank you so much for your help :)

[meFab]

What about Ext JS 4x

Your proposed solution works great in Ext JS < 4. In 4 and above gridView looses the mainBody property... Has anyone found how to make this work in ExtJS 4 and above?

Thank You gits... I resolved the error :) As it was a plugin i need to include this also in my code

Ext.grid.CheckColumn = function(config){
    Ext.apply(this, config);
    if(!this.id){
        this.id = Ext.id();
    }
    this.renderer = this.renderer.createDelegate(this);
};

Ext.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 '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';
    }
};

thank you so much for your help :)