Dynamically adding rows to the Grid in ExtJS 3.3

There may be requirement when we need to add data dynamically to the grid. For this we have to add data to the “data store” of the grid during run time.

Let us say we have a Array data store.

var dataStore = new Ext.data.Store({ 

data:[ ], 

reader:  new Ext.data.ArrayReader({id:'id'},

[ id',  'User_Name',  'Location',  'Office',  'Mobile_No',{ name: 'DOJ',  type: 'date',  dateFormat: 'Y-m-d' } ]

) } );

The above data store is initially empty and is linked to the grid.

Using “add” method we can add data to the data store.

Syntax : add(Ext.data.Record[ ] records)

Ext.data.Record is a class that encapsulate both Record definition information, and Record value information for use in Ext.data.Store objects.

So to add data to the store we need to create a record array format.

Now we can add data to our data store using the above data record.

dataStore.add( new record ({

   id:  “1”,

   User_Name:  “Sandipa Mohanty”,

   Location:  “BBSR”,

   Office:  “Mindfire Solutions”,

   Mobile_no:  “999999999”,

   DOJ:  “2009-11-16”

}) );

Similarly remove(Ext.data.Record[ ] records) can be used to delete records from the data store.