How To Display Data in a Grid using ExtJS

Grids in ExtJs are one of the most widely used components. Grids provide a better way to present your data to the end-users in an easy-to-understand manner. ExtJs Grids are user friendly, and have different customization options and events so that it can be used in your own way.
ExtJs Grids are similar to spreadsheets containing rows and columns. So, in order to display data in grid using ExtJs we need two Ext components.
1) A Grid Panel, for displaying data
2) A Store, which is like database to keep track of the data.

Now we write the javascript code for displaying data in grid

//load the required extjs files and inside script tag add the following
Ext.onReady(function() {
    //first we need to add data store which is to be displayed in the grid
   //so adding the data store for the grid
var firstStore = new Ext.data.Store({
//now add the relevant data
data: [
 [
  "Sudhir Bastakoti",
  "1983-01-17",
  "Male",
  "sudhirbas@gmail.com",
  "sudhir.bastakoti"
 ],
 [
  "John Doe",
  "1978-02=04",
  "Male",
  "john@doe.com",
  "john.doe"
 ],
 [
  "Joane Doe",
  "1985-05-24",
  "Female",
  "joane@doe.com",
  "joane.doe"
 ]
], //end of add data
//now add a reader; in this case we are using Array Reader of ExtJs to read the data
    reader: new Ext.data.ArrayReader({id: 'id'}, [
 'id',
 'full_name',
 {name: 'birth_date', type: 'date', dateFormat: 'Y-m-d'},
 'gender',
 'email',
 'skype'
    ]  
}); //end data store
  
//finally display the Grid Panel
 var firstGrid = new Ext.grid.GridPanel({
 renderTo: document.body, //grid in body; ID of a div can also be used
 frame: true, //just adds a border to Grid Panel, not compulsory though
 title: 'User Information', //as the name suggests; title of Grid
 height: 200,
 width: 250,
 store: firstStore, //name of data store that contains data and reader confs
 columns: [
  {header: "User Name", dataIndex: 'full_name'},
  {header: "Birth Date", dataIndex: 'birth_date', renderer:    Ext.util.Format.dateRenderer('m/d/Y')},
  {header: "Gender", dataIndex: 'gender'},
  {header: "User Email", dataIndex: 'email', sortable: true},
  {header: "Skype Add", dataIndex: 'skype'},
 ] //enf of column field
});
});

Add above javascript code in your html file and run in browser , you will be
seeing a grid with data added from store.

'renderer' in column field is for data formatting. In our case its used to format date to m-d-Y format. We can use some callback function instead of that. The grid has lots of built-in features which can be checked in ExtJs Manual.