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' }]; 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 }); var grid = new Ext.grid.GridPanel({ store: empStore, columns: [ //adding the RowNumberer as the first column 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' }], stripeRows: true, height: 300, width: 430, title: 'Employee Details', renderTo: Ext.getBody() });