ExtJS grid with numbering & checkbox selection

In this 2^nd post I will be enhancing the grid we created in the previous post.

How about adding row numbers to our view? We modify the columns array to hold a new member.

columns: [

new Ext.grid.RowNumberer(),

{id:'company',header: 'Last Name', width: 100, sortable: true, dataIndex: 'last_name'},

{header: 'First Name', width: 100, sortable: true, dataIndex: 'first_name'},

{header: 'Age', width: 75, sortable: true, dataIndex: 'age'},

{header: 'Date of Joining', width: 100, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'doj'}

]

Here’s the demo,

Here’s the link to the fiddle -> JSFiddle row numbering

By default multiple rows of the grid can be selected by holding down the “Ctrl” button. To disable multi select of rows add the following selection model to the grid.

sm: new Ext.grid.RowSelectionModel({ singleSelect:true })

Selecting multiple rows of a grid can be helpful. But to provide a better visual treatment rather than highlighted rows use a “CheckBoxSelectionModel”.

Here’s the modified grid code,

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

var grid = new Ext.grid.GridPanel({

store: empStore,

columns: [

        sm,   //this is to provide the checkbox for every row

        new Ext.grid.RowNumberer(),

        {header: 'Last Name', width: 100, sortable: true, dataIndex: 'last_name'},

        {header: 'First Name', width: 100, sortable: true, dataIndex: 'first_name'},

        {header: 'Age', width: 75, sortable: true, dataIndex: 'age'},

        {header: 'Date of Joining', width: 100, sortable: true, renderer:        Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'doj'}

],

sm: sm,  //sm is short for “selModel”

stripeRows: true,

height: 350,

width: 430,

title: 'Employee Details',

renderTo: Ext.getBody()

});

Demo below,

Grab the fiddle -> JSFiddle checkbox