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

Simple Grid using Ext JS

This blog post assumes you have a little background on Ext JS basics. If not I recommend you to head over to Sencha’s site and have a look at the documentation or even better follow a book.

But this is not rocket science either. A strong foundation in JavaScript is enough to get started.Grid data are very important for the user as most common information display is tabular. Grids or Data grids are made possible by using the class “Ext.grid.GridPanel”.

The following series of blog posts are written following Ext JS version 3.4. Migrating them to the latest version is not hard either. Subsequent posts will improve upon this grid by adding features incrementally. At the end you’ll realize how awesome the framework is.

This is what we will be building by the end of this post.

Let’s start by defining the sample data for the employee database. For the sake of simplicity, lets hardcode our data inside the application.

var empData = [

                       {'last_name':'Doe', 'first_name':'John', 'age':'23', 'doj':'08/06/2009'},

                       {'last_name':'Sparrow', 'first_name':'Jack', 'age':'26', 'doj':'08/12/2010'},

                       {'last_name':'Spacey', 'first_name':'Kevin', 'age':'27', 'doj':'01/23/2011'},

                       {'last_name':'Gates', 'first_name':'Bill', 'age':'35', 'doj':'10/10/2006'}

            ];

Next up we define the store. The store is nothing but a container of records. Each record is nothing but the actual data present in each row.

var empStore = new Ext.data.JsonStore({

                        fields: [

                             {name: 'last_name'},

                             {name: 'first_name'},

                             {name: 'age', type: 'int'},

                             {name: 'doj', type: 'date', dateFormat: 'm/d/Y'}

                         ],

                         data: empData

            });

Next up we define the actual grid,

var grid = new Ext.grid.GridPanel({

store: empStore,

            columns: [

                   {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'}

                ],

             stripeRows: true,

             height: 350,

             width: 400,

             title: 'Employee Details',

             renderTo: Ext.getBody()

});

In the above code,

1. The “empStore” we just defined is associated with the GridPanel. This connects the store to the actual display grid. Store is not a display component but a behind the scenes prompter. Without it the grid probably does nothing.
2. We’ve declared the columns for the grid using the columns array. “dataIndex” is the glue which defines the mapping between the record data and the column in which it is supposed to show.
3. The “renderTo” specifies which DOM elements which would contain this grid. In our case, we chosen the page body.
4. Setting ‘sortable’ to “false” will disable sorting on that particular column.
5. Setting ‘stripeRows’ to “false” will not show any difference in row color between consecutive rows.

We're done. Here’s the working fiddle -> JSFiddle ExtJS Simple Grid