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