Creating a Grid using Array data store in ExtJS 3.3

For creating a Grid in ExtJS 1st we need to create a data store.
Three types of data stores are there

1 – Array 2 – JSON

3 – XML

Below there is an example of Array data store :

var dataStore = new Ext.data.Store({
 
data:[
[1,"Sandipa Mohanty","BBSR","Mindfire Solutions","9999999999","2009-11-16"],
[2,"Sangita Das","BBSR","Mindfire Solutions","8888888888","2009-09-16" ],
[3,"Arya Acharya","BBSR","Mindfire Solutions","7777777777","2007-06-26"],
[4,"Bhumi","BBSR","Mindfire Solutions","6666666666","2008-03-06"],
[5,"Smruti Das","BBSR","Mindfire Solutions","5555555555","2009-02-16"]
],
 
reader: new Ext.data.ArrayReader( { id: 'id' },
['id',  'User_Name',  'Location',  'Office',  'Mobile_No', {name: 'DOJ',  type: 'date',  dateFormat: 'Y-m-d'}]
) } ) ;

In the above example the “data” config option store array of data and “reader” is the description about the data or we can say the column name. I have specified the data format to be 'Y-m-d'.
Date format in ExtJS is same as in PHP.

Now we can use this sample data store to create a Grid.
Below is the example of creating a grid :
 
var grid = new Ext.grid.EditorGridPanel({
 
   renderTo: Ext.getBody(),
   frame: true,
   title: 'Grid test',
   height: '552px',
   width: '100%',
   store: dataStore, //assign the data store
   stripeRows: true,
 
   columns:[
      {header: "ID", dataIndex: 'id', hidden:true},
      {header: "Name", dataIndex: 'User_Name', sortable: true},
      {header: "Location", dataIndex: 'Location', editor: location_edit},
      {header: "Company", dataIndex: 'Office'},
      {header: "Phone No", dataIndex: 'Mobile_No'},
      {header: "Date Of Joining", dataIndex: 'DOJ',
      renderer: Ext.util.Format.dateRenderer('m-d-Y')}
   ]
});

In the above example “header” config option for columns defines the text to be displayed in the grid column header and the “dataIndex” config option defines the name of the data filed. The “render” defines the format for the date value.

This is one of the simplest way to create grid in ExtJS. However it can be created using JSON and XML data store.

Hope this will help the beginners.