1. #1
    Ext JS Premium Member Elijah's Avatar
    Join Date
    Nov 2009
    Location
    USA
    Posts
    382
    Vote Rating
    0
    Elijah is on a distinguished road

      0  

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

    [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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,397
    Vote Rating
    849
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

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

Thread Participants: 1