How do I query my ExtJS grid to see which CheckboxSelectionModel() checkboxes are checked?

Question

I'm trying to get an ExtJS grid working that has checkboxes from which I can get an array of rows/ids so I know which rows have been checked.

I've used this example from Sencha to get the following grid to display correctly with the selection checkboxes, but it doesn't show how to get the information from the grid which rows have been checked, e.g. I will have a button that has a handler function and inside this I need to write something like:

var rowIdsChecks = grid.getRowIdsChecked();

How do I get the information out of the grid which rows are currently checked?

var myData = [
    [4, 'This is a whole bunch of text that is going to be word-wrapped inside this column.', 0.24, '2010-11-17 08:31:12'],
    [16, 'Computer2', 0.28, '2010-11-14 08:31:12'],
    [5, 'Network1', 0.02, '2010-11-12 08:31:12'],
    [1, 'Network2', 0.01, '2010-11-11 08:31:12'],
    [12, 'Other', 0.42, '2010-11-04 08:31:12']
];

var myReader = new Ext.data.ArrayReader({}, [{
        name: 'id',
        type: 'int'
    }, {
        name: 'object',
        type: 'object'
    }, {
        name: 'status',
        type: 'float'
    }, {
        name: 'lastChange',
        type: 'date',
        dateFormat: 'Y-m-d H:i:s'
    }]);

var sm = new Ext.grid.CheckboxSelectionModel();

var grid = new Ext.grid.GridPanel({
    region: 'center',
    style: 'margin: 10px',
    store: new Ext.data.Store({
        data: myData,
        reader: myReader
    }),
    cm: new Ext.grid.ColumnModel({
        defaults: {
            width: 120,
            sortable: true
        },
        columns: [
            sm,
            {
                header: 'ID',
                width: 50,
                sortable: true,
                dataIndex: 'id',
                hidden: false
            },
            {
                header: 'Object',
                width: 120,
                sortable: true,
                dataIndex: 'object',
                renderer: columnWrap

            }, {
                header: 'Status',
                width: 90,
                sortable: true,
                dataIndex: 'status'
            },
            {
                header: 'Last Updated',
                width: 120,
                sortable: true,
                renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s'),
                dataIndex: 'lastChange'
            }]
    }),
    sm: sm,
    viewConfig: {
        forceFit: true
    },
    title: 'Computer Information',
    width: 500,
    autoHeight: true,
    frame: true,
    listeners: {
        'rowdblclick': function(grid, index, rec){
            var id = grid.getSelectionModel().getSelected().json[0];
            go_to_page('edit_item', 'id=' + id);
        }
    }
});

Solution:

Thanks @jujule, this code works:

Ext.select('span#internal_link_001').on('click', function() {
    var selections = grid.getSelectionModel().getSelections();
    console.log(selections);
});

and then you have the ids like this:

Solution 1

The CheckboxSelectionModel is responsible of tracking and managing selections.

Just use its getSelections() method to get an array of selected records :

grid.getSelectionModel().getSelections()

Solution 2

If the grid has been loaded say a , then use.

<script type="text/javascript" language="javascript">
function ValidateCheckBoxChecked() {
    var count = 0;
    var counter = 0;
    var ChkBoxValue;
    var checkboxList = document.getElementById("divGridData").getElementsByTagName("input");
    for (var i = 0; i < checkboxList.length; i++) {
        if (checkboxList[i].checked) {
            counter++;
        }
    }
    return counter; //this will return the number of checkBoxed checked.
}
</script>