Ext JS grid panel with checkbox column

Question

I've got a grid in my page with a CheckboxModel set on it. It's showing the names and checkboxes but I don't know how to bind the boolean column from the store to the column from the selection model. I've found examples using CheckColumn instead but this throws an error that it doesn't have a constructor. Must be a change in v4. Would really appreciate some help with this please.

Ext.define('Roles', {
    extend: 'Ext.data.Model',
    fields: ['Id', 'Name', 'Selected'],
    proxy: {
        type: 'ajax',
        url: '/tpn/Types/AjaxList',
        reader: {
            type: 'json',
            root: 'rows',
            totalProperty: 'total',
            successProperty: 'success'
        },
        listeners: {
            exception: function (proxy, type, action, options, response, arg) {
                Ext.MessageBox.alert('Error', Ext.decode(type.responseText).error);
            }
        }

    }
});

var roleStore = Ext.create('Ext.data.Store', {
    model: 'Roles'
});

var sm = Ext.create('Ext.selection.CheckboxModel');

var grid = Ext.create('Ext.grid.Panel', {
    store: roleStore,
    selModel: sm,
    columns: [{
        header: 'Name',
        dataIndex: 'Name',
        flex: 1
    }],
    renderTo: 'RoleGrid',
    autoHeight: false,
    height: 200,
    frame: false
});

Answer 1

You can place a listener on the afterrender event of your grid (or on the load event of your bound store) to walk the store for the boolean checked value and call the GridPanel.selectRecords() method to select all those records in your UI. This will check their checkboxes.