Question about UpdateManager

[shinryudb]

Hello,

I'm trying to provide real-time updates to some data that is stored in a grid. I used the UpdateManager's startAutoRefresh to get the new data from a php script that I have on the server side. I then set up an event handler waiting for the 'update' event, and when that happens, I call a handler function. The handler function simply refreshes the grid to display the new data.

The strange problem is that when I try to refresh the grid, the actual refreshed grid is never displayed. Instead the contents of the grid are displayed as one long string (e.g. 221000188650.0000000ABORTED331000288740.0000000SHUTDOWN422000298440.0000000SHUTDOWN53400022540.0000000SHUTDOWN").

So then what I did was to render the grid each time instead of refreshing it...and it worked! The only reason I prefer to use refresh is because whenever the grid renders each time, there is a noticable flicker (i.e. the loading icon comes up for about a second and then the grid is redrawn). However, with refresh this is not a problem. I tried using beginUpdate() and endUpdate() to see if it would mitigate the flickeing problem, but no luck.

Previously I solved this problem by using setTimeout to load the dataStore ever x number of milliseconds. This worked because the dataStore knows how to parse the incoming XML. And then all I had to do was refresh the grid once the data was loaded. The only problem with this approach was that after a certain number of setTimeouts, the browser seemed to have gotten overloaded and I'd get a "too much recursion error" by Firebug. Consequently I wanted to try out EXT's UpdateManager to see if it could be a potential solution. But in this case, it appears that there's no way to continously update the dataStore (i.e. no update manager for the dataStore), so I'm not entirely sure how to use it properly.

Do you guys have any idea why this might be occuring? Any help would be greatly appreciated. I've attached the relevant code.
-Upal Hasan



var dataStore = new Ext.data.Store({
//proxy: new Ext.data.HttpProxy({url: 'php/loadRunningJobs.php'}),
proxy: new Ext.data.HttpProxy({url: 'php/executiveStatus.php'}),
reader: new Ext.data.XmlReader({
record: 'executive_entry', //record: 'Item',
id: 'ASIN'
}, [ 'id', 'port', 'state', 'uptime', 'jobs' ])
});

var colModel = new Ext.grid.ColumnModel([
{header: "ID", width: 120, dataIndex: 'id'},
{header: "Port", width: 120, dataIndex: 'port'},
{header: "State", width: 120, dataIndex: 'state'},
{header: "Uptime", width: 120, dataIndex: 'uptime'},
{header: "Num Running Jobs", width: 150, dataIndex: 'jobs'}
]);

colModel.defaultSortable = true;

var grid = new Ext.grid.EditorGrid('execControlGrid', {
ds: dataStore,
cm: colModel,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
enableColLock: false
});
var gridPanel = new Ext.GridPanel(grid);
executiveLayout.add('center', gridPanel);

dataStore.load();
grid.render();

var tab = mainLayout.getRegion('center').getTabs().getTab('execControl');
tab.on('activate', function() {
var mgr = new Ext.UpdateManager('execControlGrid');
mgr.startAutoRefresh(8, "php/executiveStatus.php");
mgr.on('update', function(data) { EDFExecutiveControl.updateGridHandler(data,gridPanel) } );
});

tab.on('deactivate', function() {
var mgr = gridPanel.getUpdateManager();
mgr.stopAutoRefresh();
});
},

updateGridHandler : function(data, panel) {
executiveLayout.beginUpdate();
panel.getGrid().render();
executiveLayout.endUpdate();
},

[tryanDLS]

UpdateManager is intended to update an Element, not a store. Try searching the forums - there is a fairly lengthly thread where someone developed a continuously updating grid - it may be a 2.0 solution.

[shinryudb]

Tim,

It appears as though UpdateManager is correctly obtaining the new data that I need through the PHP calls, but I'm just confused about why I have to render the grid each time so that I don't have to see that long string of characters (e.g. "221000188650.0000000ABORTED331000288740.0000000SHUTDOWN422000298440.0000000SHUTDOWN53400022540.00000 00SHUTDOWN").

Is there any way I can get around this problem by simply refreshing the grid? If I could pull that off, my problem would be solved.

Thanks again for your help.
-Upal

[hendricd]

UpdateManager is intended to update an Element,.... , not a store.

[shinryudb]

Tim & Doug,

OK, I think I understand. Since the grid itself is an Element, I can use render to see the reflected changes in the data (because the entire grid is being re-drawn), but it doesn't work for refresh because I guess that requires the data in the datastore to be altered. Is that right? If that's the case, it makes some sense. In my code, I used the UpdateManager to update the grid (an element), but since that has nothing to do with the store, it never paints when I try to refresh the grid.

I'll search the forum for a better solution. Thanks!
-upal

[hendricd]

The only two things that will refresh a (properly configured) grid are:

grid.store.load / reload, [data updates]
and
grid.getView().refresh(); [UI repainted only]


UpdateManager has no intrinsic value to a Grid. (for use with basic block HTML elements)

[tryanDLS]

Since the grid itself is an Element...

This is an incorrect statement. An Element is simply an Ext wrapper around a DOM element. An Element has no knowledge of the internals of a grid, or any other widget or Component.

[shinryudb]

Thanks everyone! Really appreciate the help.