How to add a checkbox in a grid panel

I need help understanding how I would add a checkbox to a specific column of a grid panel.

Code:

var sm = new Ext.selection.CheckboxModel({
    checkOnly: true,
    injectCheckbox: 3
});
Ext.define('App.view.InfoGridPanel', {

    extend: 'Ext.grid.Panel',
    id: 'infogridpanel',
    alias: 'widget.infogridpanel',
    selModel: sm,
    store: '=App.store.infoStore',
    border:false,
    title: 'Information',
    
    columns: [
        {
            text: 'Name',
            dataIndex: 'name',
            flex:4,
            tdCls:'wrap-text'
        }, {
            text: 'Email',
            dataIndex: 'email',
            flex:1
        }, {
            text:'Combined size (appx)',
            flex:1,
            dataIndex:'size'
        }, {
                         
             xtype : 'checkcolumn', //checkcolumn
             text : 'active',
             dataIndex : 'active',
                         align: 'center'
                         
                         
        }
    ]       
});

I want to have the checkbox appear within the checkcolumn active, but it doesn't work. the checkcolumn property itself works, when I click on it, it shows a red tickmark signifying that a selection was made, but does not show a checkbox. Please let me know of any suggestions



How to add a checkbox in a grid panel