Refreshing a Grid With New Data

[rarerules]

I am trying to use an UpdateManager to update the contents of a grid. So far, I have successfully sent the contents of my grid to my server as follows:


function refreshGrid(item,pressed) {
// get the data from the grid
myds = grid.dataSource;
recordCount = myds.getCount();
rows = myds.getRange(0,recordCount);
var updated_data = new Array();
for(x=0;x<recordCount;x++) {
updated_data[x] = rows[x].data;
}
// convert the data to json
json_data = Ext.encode(updated_data);

// send a request for new grid contents via UpdateManager
var el = Ext.get(\"grid\");
var mgr = el.getUpdateManager();
mgr.update({
url: "someurl.php",
params: { data: json_data },
nocache: true,
text: \"Loading...\",
timeout: 30,
scripts: true
});
}


The server then responds with new data in JSON format.

My question is this: How can I use the JSON data returned from the UpdateManager call to repopulate my grid?

Thanks so much for your help! :)

[sonic64]

What do you gave in someurl.php?

Also, I believe taht if you update correctly data to your server, then with a grid refresh, you hsould be able to visualize it in your grid.

[Domitian]

Just a word of advice, I wouldn't use the updateManager to update the grid. You can use the Ext.data.Store to update the grid via HttpProxy. All you need to do is retrieve the data from the form that you pass it

Here's a thread discussing and providing a new UrlEncode and getForm method:
http://extjs.com/forum/showthread.php?t=3685&highlight=urlEncode

From there, you just need to set the 'beforeload' event on the data store. Something like the following:

var obj = getForm(formId);
ds.on('beforeload', function() {
ds.baseParams = obj;
});

ds.load({params:{start:0, limit: 25}});

[Wolfgang]

I think these are two questions:
1.) how to update a grid
2.) how to use updatemanger's function "startAutoRefresh" in a grid.

For 1.) one can use ds.load().
For 2.) Neither the grid nor the datastore contains an updatemgr object. Only the PagingToolbar provides an updatemanager. Unfortunately that updatemanager is decoupled from the datastore, so it does not now the url etc.

(JSONView for example does provide itself an updatemgr object).

So i would like to raise again the question: How can one use the updatemgr using the "startAutoRefresh" method in a grid?
Or
Is the attempt to use the updatemgr the wrong approach and it is more "Ext-like" to use a timer to trigger a ds.load() event?

[rarerules]

Thanks everyone for your replies. I suppose I should be a little clearer when describing my question.

On my page, I have a grid and a toolbar with a few buttons on it. When a user clicks on one of these buttons, I would like the following to happen:

1. All data from the grid is collected and sent in JSON format to a PHP script server-side.
2. The PHP script does some processing, and returns a new data set in JSON format to the client.
3. The client receives the new data, and refreshes the grid accordingly.

It would be even nicer if a "loading..." prompt replaced the grid during the server-side processing (seeing as this could take 20-30 seconds -- worst case).

From your comments, it seems as if using an UpdateManager is not the way to go. Instead, it was mentioned that I should call load() on my dataStore. However, in my case the load() call is just a subset of this entire operation. During a load() operation, the client simply receives JSON data from the server. Nothing is sent from the client. In this case, I am first sending grid data to the server, then processing it, and then finally performing the same load() operation after the processing is complete.

It is important for all the processing to be finished before the ds.load() call is made. So is there some way to send all grid data to the server as a synchronous operation, and then when it finished, continue with a ds.load()? Perhaps using Ext.lib.Ajax.request?

Thanks so much for your help.

[Wolfgang]

...
However, in my case the load() call is just a subset of this entire operation. During a load() operation, the client simply receives JSON data from the server. Nothing is sent from the client.
...


You might want to have a look on the beforeLoad event.

// eventhandle: modify the baseParams setting for this request
ds.on('beforeload', function() {
ds.baseParams = {
'cdrType': cdrType,
'fromDate': fromDate.getValue(),
'toDate': toDate.getValue(),
'number': filter.getValue()
};
});

This event fires _each time_ before the load event. So you can pass anything you want here to your server script. (So you can modify vars for each request)
If you want send back the grid data, then you need to access the grid data store and add the data to baseParams.

In you server side script, you access them as usual:

...
isset($_POST['start'])? $start = $_POST['start'] : $start = 0;
isset($_POST['limit'])? $limit = $_POST['limit'] : $limit = 25;
isset($_POST['sort'])? $sortCol = $_POST['sort'] : $sortCol = 'calldate';
isset($_POST['dir'])? $sortDir = $_POST['dir'] : $sortDir = 'DESC';
isset($_POST['cdrType'])? $cdrType = $_POST['cdrType'] : $cdrType = 'all';
...


BTW: If you use Firefox with FireBug, then you can easily see what is sent / received for each XHR request.

But maybe someone can step in and give also an idea about the "ext-way" to implement autoupdate proper :)

[rarerules]

Thanks wolfgang. Unfortunately, like I said there is a difference between a load() call and what I want here (we'll call it a solve operation).

When the grid is first loaded, it is populated via an HttpProxy. However, when the user presses the 'solve' button on the toolbar, the grid data first needs to be sent to the server for processing before data is returned.

As a result, using the beforeLoad() event is not good enough, since I do not want this extra processing to take place every time the grid loads data.

Again, load means no data sent. Solve means data sent and extra processing server-side. They are two distinct operations. Any ideas?

[rarerules]

Thanks everyone for your help.

I figured out how to use ds.load() properly. However, when the new AJAX data is returned from the server, the grid does not seem to refresh.

How can I get the grid to refresh its data from the load() call?

[tryanDLS]

After you load the new data call grid.getView().refresh()

[Domitian]

Would you care to share on how you solved the problem? This may be helpful to other users that run into the same situation.

[rarerules]

I would be happy to share my solution, once it is solved :)

I still am not able to get the grid to refresh after the ds.load call. Here is my code:


ds.proxy = new Ext.data.HttpProxy({url: 'someurl.php' });
ds.load();
grid.getView().refresh();


There are two problems.

The refresh call is made before the load finishes, since the load is done asynchronously
Even if I put a breakpoint at the refresh() call in firebug to halt execution until the load() is finished, the grid still does not refresh when it is called. It seems as if the refresh() call does absolutely nothing.


Any thoughts?

[tryanDLS]

As numerous other threads have pointed out, loading the datastore is an async process. You can't just call refresh after calling load b/c the load has not completed. You need to call refresh in the handler of the load event.

ds.on('load', myfunc, this)

ds.load(...);

....
myFunc: function() {
...
refresh();
}

[rarerules]

Tryan, thanks for all your help again. I really appreciate it, and would love to get this working!

Unfortunately, I am still not clear about how to proceed. My load call works perfectly (ie: data is sent and new JSON data is returned successfully). However, no matter what I do, I cannot get the grid to refresh with the new data from the load.

I am even using firebug to pause execution manually before the refresh call is executed, waiting for the load call to complete, and then allowing the refresh to continue. Still, the data remains the same and no updating or refreshing is done.

I am stumped. Should the refresh happen automatically after the ds.load() call is made? Or do I have to manually refresh the grid? If I have to manually call refresh(), why don't I have to do that the first time the grid loads?

Any help here would be wonderful, I am 100% stuck :)

[tryanDLS]

I would suggest setting BPs in store.load and loadRecords. When the response is valid, datachanged is fired. gridview handles this and then calls refresh and the then load is fired. When the response is bad, only load is fired, so you don't refresh. You say JSON is returned, but do you know it's valid? Look at the success flag in loadRecords.

[rarerules]

Bingo! I thought for sure the JSON data being returned was valid, but after taking a second look you were right.

It's all fixed now, thanks so much!

[kmondal]

Hello,
Recently I have started using Ext.grid and got stuck at some point.

I have a grid - in the first column of the grid I show the serial numbers (i.e. 1,2,3,4,5,6...).
Now when I delete some of the rows from the grid, the content in the first column become non-continuous (like 1,3,6,9,...).

So after delete, I want to reassign the serial number (in first grid column) for the rest of the rows in grid.

My code is like:
.
.
var dso = <portlet:namespace/>pGrid.getDataSource();
for(var i=0; i<dso.getCount();i++) {
var record = dso.getAt(i);
record.data.id = i;
}

// Load the Data Store
dataStore.reload();

This does not work !
At reload statement I am getting error: "TypeError: this.proxy has no properties" - though I have found that the "id" values in dataStore got chaged properly.
But I do not know how to repaint/reassigned the modified values in grid UI.

Can anyone please suggest me how to update particular cell values in grid?

Much appreciated,
Kuntal

[mattdennewitz]

this works for me in the scenario of having an item in one datagrid refresh another:


function displayIPGrid(host_id)
{
datasource = details_grid.getDataSource();
datasource.proxy = new Ext.data.HttpProxy({ url: ' - the url - ' })
datasource.reload();
details_grid.getView().refresh();
}

[Wolfgang]

...
datasource = details_grid.getDataSource();
datasource.proxy = new Ext.data.HttpProxy({ url: ' - the url - ' })
...

Why do you need to create a new HttpProxy every time you call the function?

[cesarulo]

I concur, it would be supernice if you could share how you figured this out...

[symfony]

datasource = UserManager.UsersGrid.getDataSource();
datasource.proxy = new Ext.data.HttpProxy({ url:'myurl'+e.id});
datasource.reload();
grid.getView().refresh();

This works for me nice. The only Problem I have is, that when the received Data is empty, my Grid uses the old dataset. Are there any possibilities to avoid this and making the grid deleting the old data?
thanks for reply

[tryanDLS]

By default the store clears old data on load/reload, unless you pass add:true in your options. If this is not the case, you should set a BP in store.loadRecords to see what's happening.

[Wolfgang]

This works for me nice. The only Problem I have is, that when the received Data is empty, my Grid uses the old dataset. Are there any possibilities to avoid this and making the grid deleting the old data?
thanks for reply
I am pretty sure, your JSON Response in case you get an "empty" result will be invalid and you do not have an errorhandler for this case.
So i assume thats why the grid does not clear the data.