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
    Location
    USA
    Posts
    382
    Vote Rating
    1
      0  

    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
    Location
    Gainesville, FL
    Posts
    39,336
    Vote Rating
    1296
      0  

    Default

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

    Code:
    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"}]})

Posting Permissions

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