Checkbox in Grid

[Silver Paladin]

Hi everyone.

I have a datagrid, and what I would like is a checkbox in the grid column.

Now, I know there is Ext.grid.CheckboxSelectionModel that I can use to put the checkbox in, as well as a couple of user extensions, but they don't do what I want.

What I would like to see happen is that the checkbox is rendered either checked of cleared depending on data from json. No problem there!

Next, when a user clicks on the check box, I don't want to select the row, rather I want to send a command to the server to update the data related to that check box. What happens now is that the rows click event is launched (which currently brings up an edit form) and the click on the checkbox is ignored.

How do I add an onclick to the checkbox that works when a user clicks on the checkbox, but keep my click event on the grid row?

To get the checkbox to render, I used smart checkbox selection model http://extjs.com/forum/showthread.php?t=37588 but I could not see how to trap a click on the checkbox. When I click on the checkbox now it launches the rows click action.

Ext.namespace('buildersGrid');

buildersGrid.Grid = Ext.extend(Ext.grid.GridPanel, {
    gridLimit: 30,
    filter: '',
    initComponent: function(){
        Ext.apply(this, {
            store: new Ext.data.JsonStore({
                url: 'data/grid.json.php',
                baseParams: {
                    grid: 'buildersGrid',
                    filter: this.filter,
                    community_id: communityId
                },
                method: 'get',
                root: 'data',
                id: 'id',
                autoLoad: false,
                totalProperty: 'total',
                fields: [{
                    name: 'id',
                    type: 'int'
                }, {
                    name: 'name',
                    type: 'string'
                }, {
                    name: 'showInCommunity',
                    type: 'string'
                }]
            }),
            columns: [new Ext.grid.SmartCheckboxSelectionModel({
                header: "Show In " + hopewell.app.getCommunity(),
                id: 'showInCommunityCB',
                dataIndex: 'showInCommunity',
				email: true,
                width: 125
            }),{
                id: 'id',
                dataIndex: 'id',
				hidden: true
            }, {
                id: 'name',
                header: "Builder",
                sortable: true,
                dataIndex: 'name'
            }],
            viewConfig: {
                forceFit: true,
                autoExpandColumn: 'name'
            },
            tbar: ['Search Builders:', ' ', new Ext.form.TextField({
                width: 200,
                id: 'filterField',
                listeners: {
                    specialkey: {
                        scope: this,
                        fn: function(field, e){
                            if (e.getKey() == e.ENTER) {
                                this.store.baseParams.filter = field.getValue();
                                this.store.load({
                                    params: {
                                        start: 0,
                                        limit: this.gridLimit
                                    }
                                });
                            }
                        }
                    }
                }
            }), '-', {
                text: 'Add Builder',
                tooltip: 'Click to add a builder to the system',
                handler: function(){
                    popWindow('Add Builder', 'builderForm', 0, this.store);
                },
                scope: this,
                iconCls: 'add'
            }]
        }); // eo apply
        this.bbar = new Ext.PagingToolbar({
            store: this.store,
            displayInfo: true,
            pageSize: this.gridLimit
        });
        // call parent
        buildersGrid.Grid.superclass.initComponent.apply(this, arguments);
    } // eo function initComponent
    ,
    listeners: {
        scope: this,
        rowclick: function(grid, rowIndex, e){
            var record = grid.getStore().getAt(rowIndex);
            var id = record.get('id');
            var label = record.get('name');
            popWindow('Edit ' + label, 'builderForm', id, grid.getStore());
        }
    } // eo listeners
    ,
    onRender: function(){
    
        // call parent
        buildersGrid.Grid.superclass.onRender.apply(this, arguments);
        
        // load the store
        this.store.load({
            params: {
                start: 0,
                limit: this.gridLimit
            }
        });
        
    } // eo function onRender
}); // end of statuses grid
Ext.reg('buildersGrid', buildersGrid.Grid);

// eof

[kolen]

Here is modified version of CheckboxSelectionModel that does not apply to selection, but changes record field.

/**
 * Add to ColumnModel and grid's plugins to enable column with checkboxes bound
 * to record's boolean field.
 */
CheckboxColumn = Ext.extend(Ext.util.Observable, {
    header: '<div class="x-grid3-hd-checker"> </div>',
    width: 20,
    sortable: false,
    dataIndex: 'enabled',

    // private
    menuDisabled:true,
    fixed:true,
    id: 'checker',

    init: function(grid) {
        this.grid = grid;
        var view = grid.getView();

        grid.on('render', function(){
            view.mainBody.on('mousedown', this.onMouseDown, this);
        }, this);
    },

    // private
    initEvents : function(){
        Ext.grid.CheckboxSelectionModel.superclass.initEvents.call(this);
        this.grid.on('render', function(){
            var view = this.grid.getView();
            view.mainBody.on('mousedown', this.onMouseDown, this);
            Ext.fly(view.innerHd).on('mousedown', this.onHdMouseDown, this);

        }, this);
    },

    // private
    onMouseDown : function(e, t) {
        var targ = Ext.get(t);
        if(e.button === 0 && targ.hasClass('grid-checkbox')){
            e.stopEvent();
            var row = e.getTarget('.x-grid3-row');
            if(row){
                var record = this.grid.store.getAt(row.rowIndex);
                var isChecked = record.get(this.dataIndex);
                record.set(this.dataIndex, !isChecked);
            }
        }
    },

    // private
    renderer : function(v, p, record){
        var checked = v ? ' grid-checkbox-checked' : '';
        return '<div class="grid-checkbox'+checked+'"> </div>';
    }
});

css:

.grid-checkbox {
    width:100%;
    height:18px;
    background-position:2px 2px;
    background-repeat:no-repeat;
    background-color:transparent;
     background-image:url(../extjs/resources/images/default/grid/row-check-sprite.gif);
    background-position:2px 2px;
}

.grid-checkbox-checked {
    background-position:-23px 2px;
}

[pulkitagarwal]

Only this will not help you :
Read this :


http://bytes.com/topic/javascript/an...box-grid-panel

Also checkColumn does not work for Ext-2.2 i upgraded to 3 and it worked .