Results 1 to 2 of 2

Thread: How do I use Ajax to populate the grdi

  1. #1
    Ext JS Premium Member Elijah's Avatar
    Join Date
    Nov 2009
    Vote Rating

    Default [Solved] How do I use Ajax to populate the grid

    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.

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL
    Vote Rating


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

    var testDataStore = new{
    	id: "testDataStore",
    	autoLoad: true,
    	proxy: new{
    		url: "script.php", 
    		method: "POST"
    	baseParams: {task: "GET-STUFF"},//optional, depending on your remote script
    	reader: new{
    		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"}]})

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts