Numbering rows in a grid panel

Another common pattern when working with grid components is numbered rows. The Movies grid in this recipe exemplifies how this can be accomplished:

How to do it...

1. 1. Define the data store:

   var store = new Ext.data.JsonStore({
   url: 'grid-row-numberer.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. Define the grid panel. The first column of the grid is of the RowNumberer type:

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