How do I use Ajax to populate the grdi

[Elijah]

I have been playing around with the grid from the example this past week and after finally getting the grid to populate with data returned from the server via ajax and getting the javascript setInterval to work, I realized I have no idea how to get the grid to repopulate with new data from the servers response.

Can someone tell me how to repopulate a grid that is already displayed with new data?

I do not want to close and reopen a window but keep a window open.

Now, I am also aware that I may just be using the wrong type of prepackaged module but its what I found first that I am trying to work with.

[mitchellsimoens]

I'd use Ext.data.Store instead. Then all you have to do is reload() the Store in your setInterval function... Example:

var testDataStore = new Ext.data.Store({
	id: "testDataStore",
	autoLoad: true,
	proxy: new Ext.data.HttpProxy({
		url: "script.php", 
		method: "POST"
	}),
	baseParams: {task: "GET-STUFF"},//optional, depending on your remote script
	reader: new Ext.data.JsonReader({
		root: "results",
		totalProperty: "total",
		id: "id"
	},[
	   {name: "test", type: "int", mapping: "test"},
	   {name: "test1", type: "string", mapping: "test1"},
	   {name: "test2", type: "string", mapping: "test2"}
	])
});

var testColumnModel = new Ext.grid.ColumnModel(
	[{
		header: "Test",
		dataIndex: "test",
		width: 100
	},{
		header: "Test 1",
		dataIndex: "test1",
		width: 100
	},{
		header: "Test 2",
		dataIndex: "test2",
		width: 100
	}]
);

var testGrid =  new Ext.grid.GridPanel({
	id: "testGrid",
	store: testDataStore,
	cm: testColumnModel,
	selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
	viewConfig: {
		forceFit: true
	}
});
testDataStore.load(); //load for the first time
testDataStore.reload(); //reload data will also refresh the grid automatically

Your script needs to return JSON.... example:

({'total':'1','results':[{"test":"The orig test","test1":"This is the 1st Test","test2":"This is the 2nd test"}]})