Using checkboxes to select grid rows

A common pattern for row selection is the use of a checkbox column. The Movies grid in this recipe shows how this can be accomplished:

How to do it...

1. 1. Create the data store:

   var store = new Ext.data.JsonStore({
   url: 'grid-checkbox-selection.php',
   root: 'movies',
   idProperty: 'id',
   totalProperty: 'count',
   fields: ['id', 'title', 'category', 'rating', 'actors',
   { name: 'length', type: 'int' },
   { name: 'price', type: 'float' }],
   remoteSort: true
   });
   store.setDefaultSort('title', 'asc');
   

2. 2. Create a checkbox selection model:

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

3. 3. Define the grid panel that uses the checkbox selection model:

   Ext.onReady(function() {
   var grid = new Ext.grid.GridPanel({
   title: 'Movies',
   store: store,
   sm:checkboxSel,
   
   columns: [
   checkboxSel,
   
   {header: "ID", width: 30, dataIndex: 'fid', sortable: true, hidden:true },
   { id: 'title-col',
   header: "Title",
   width: 180,
   dataIndex: 'title',
   sortable: true
   },
   { header: "Category"...