Extjs Grid- disable some checkbox on special row

Question

I have a simple gridpanel with a column using xtype:checkcolumn

Ext.define('Ext.abc.grid', {
     extend: 'Ext.grid.Panel',     
     columns: [
        {
            text: 'id', dataIndex: 'id'
        },     
        { text: 'status', dataIndex: 'abc', 
          xtype: 'checkcolumn',

            /*viewConfig: { 
                getClass: function(Value, metaData, record){

                })
            },*/
            listeners:{
                beforecheckchange: function(column, row, checked, opts){ 
                },
                checkchange:function(cc,ix,isChecked){
                }
            }
        }
    ]
});

I want to disable some checkboxes on a special row by column id. Is it possible? How can I do that? Thanks.

Anu

Answer 1

I took a look into the code of Ext.grid.column.CheckColumn, and I think the less intrusive way to achieve what you want is to:

1. Use a tweaked model that prevent modification on the desired condition.

2. Override the column renderer to add the disabled class for record that are not checkable.

Example:

// Using anonymous model class just to show that you can do this,
// if you don't need to define an application-wide model
var model = Ext.define(null, {
    extend: 'Ext.data.Model'

    ,fields: ['id', 'status', 'checkable']

    // example data    
    ,proxy: {
        type: 'memory'
        ,reader: 'array'
        ,data: [
            [1, true, true]
            ,[2, true, false]
            ,[3, false, true]
            ,[4, false, false]
        ]
    }

    // 1. Prevent modification on certain conditions    
    ,set: function(field, value) {
        if (field === 'status' && !this.get('checkable')) {
            return null;
        } else {
            return this.callParent(arguments);
        }
    }
});

Ext.widget('grid', {
    renderTo: Ext.getBody()
    ,height: 200
    ,store: {
        model: model
        ,autoLoad: true
    }
    ,columns: [{
        text: 'id'
        ,dataIndex: 'id'
    },{ 
        text: 'status'
        ,dataIndex: 'status'
        ,xtype: 'checkcolumn'

        // 2. Custom renderer to reflect "checkability"        
        ,renderer: function(value, meta, record) {
            var cssPrefix = Ext.baseCSSPrefix,
                cls = [cssPrefix + 'grid-checkcolumn'];

            if (
                this.disabled 
                // this is the added condition for disabledCls
                || !record.get('checkable')
            ) {
                meta.tdCls += ' ' + this.disabledCls;
            }
            if (value) {
                cls.push(cssPrefix + 'grid-checkcolumn-checked');
            }
            return '<img class="' + cls.join(' ') + '" src="' + Ext.BLANK_IMAGE_URL + '"/>';
        }
    },{
        text: 'modifiable'
        ,dataIndex: 'checkable'
        ,xtype: 'booleancolumn'
    }]
});

Kory

I try to run your example code at jsfiddle.net/KQdvJ to view your example but it's not working, sorry i'm newbie in extjs – Anu

CheckColumn was an ux in 4.1.1 that has been integrated in the framework in 4.2.0. So you need to require it: jsfiddle.net/rixo/KQdvJ/1 – Kory

Also, in 4.1.1 checkcolumns didn't have style for disabled state, and the render method has changed. – Kory

thanks u, i found this thread mysamplecode.com/2012/02/… . That maybe like u, using css. i'm trying... – Anu

@Kory I would like to hide it completely, not only disable it. What would be the best way to go? – Excrement