Appending data to GridPanel in ExtJS

Question

I'm stuck with a seemingly simple problem: appending data to my ExtJS Gridpanel. I have a gridpanel with some initial data set up.

var myData = [['data1','data2']];

var myReader = new Ext.data.ArrayReader({}, [
   {name: 'Col1'},
   {name: 'Col2'},
            );

var datastore = new Ext.data.Store({
   data: myData,
   reader: myReader
   });
grid = new Ext.grid.GridPanel({
   store: datastore,
   ...
   etc

This is all working fine.Now i would like to periodically append new data to this gridpanel (there is a function that is generating arrays of data). However I cant get this to work. Tried datastore.add, but to no avail.

Any ideas?

Answer 1

What did you pass to datastore.add?

Try this:

datastore.add(new datastore.recordType({
    Col1: 'data3',
    Col2: 'data4'
}));

Answer 2

There must be an issue with the data that you are passing through as the parameter to the add method. Did any error appear in Firebug? If so, what is it?

The add method takes an array of Ext.data.Record objects as its parameter. So if you have arrays of data that you want to add to the grid, then each array will need to be converted into the record format before you can pass it to the store. For example:

var new_data = [['data3','data4'], ['data5','data6']];

for (var i = 0, len = new_data.length; i < len; i++) {
    datastore.add(new datastore.recordType({
           Col1: new_data[0],
           Col2: new_data[1]
        })
    );
}