How to have a column with a label and a checkbox

Question

I am using ExtJs - 4.2 . I want to have a column in a grid with a label and a checkbox - Any ideas how to do it ?

I think checkcolumn doesnt allow text next to it. /{ xtype: 'checkcolumn', header: 'Indoor?', dataIndex: 'indoor', width: 90, stopSelection: false },/

Is there a way how to do this ?

player player · Accepted Answer · 2013-07-19T01:26:57

You can extend the "Ext.grid.column.CheckColumn" class and override the renderer function. Just a quick example:

Ext.define('CustomCheckbox', {
    extend: 'Ext.grid.column.CheckColumn',
    xtype: 'CustomCheckbox',

    config: {
        chkLabel: ''
    },

    renderer : function(value, meta) {
        var cssPrefix = Ext.baseCSSPrefix,
            cls = [cssPrefix + 'grid-checkcolumn'];

        if (this.disabled) {
            meta.tdCls += ' ' + this.disabledCls;
        }
        if (value) {
            cls.push(cssPrefix + 'grid-checkcolumn-checked');
        }
        return '<img class="' + cls.join(' ') + '" src="' + Ext.BLANK_IMAGE_URL + '"/>' + this.chkLabel;
    }
});

Now, you could use it as:

{
    xtype: 'CustomCheckbox',
    dataIndex: 'complete',
    itemId: 'chkComplete',
    chkLabel: 'SOme content'
}

How to have a column with a label and a checkbox

2 Answers