PDA

View Full Version : Refresh DataView without DataStore reload



akrherz
24 Jun 2009, 4:06 PM
Hi,

My use case is to have a DataView of webcam images that are stored on the server and I wish for the client to refresh these images every minute. Optionally, the user can selectively disable certain webcam images from refreshing (still working on that). Anyway....

I am basically following the DataView example shown in the docs and get the images to display via a JsonDataStore. Now, how can I get the images to refresh? I don't need/want to reload the datastore, as it will fire a needless json request.

The docs indicate a dataview.refresh() may be what I want, but it doesn't appear to actually do anything (templates are not re-rendered).

Anybody giveme a hint onto what I am probably obviously missing? :)

thanks!
daryl

aconran
24 Jun 2009, 5:35 PM
daryl -

What are you looking to refresh? Doing a reload of the data store will force the DataView to repaint with the latest data.

You can also change the contents of the DataStore without a full reload and the DataView will update the UI.

akrherz
24 Jun 2009, 6:02 PM
Hi Aaron,

Thanks for your response. The DataView has 1 webcam image per 'cell', the initial json query populates those webcam images. I seek to refresh those images every minute.

daryl

akrherz
25 Jun 2009, 10:07 AM
Thanks again, your post got me down the right path. I ended up doing this.



imagestore = new Ext.data.JsonStore({
url: 'get-images.php',
root: 'images',
fields: [
'name', 'url'
]
});
imagestore.load();


var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap" id="{name}">',
'<div class="thumb"><img src="{url}?{[ (new Date()).getTime() ]}" title="{name}"></div>',
'<span>{name}</span></div>',
'</tpl>',
'<div class="x-clear"></div>'
);

var dv = new Ext.DataView({
store : imagestore,
itemSelector:'div.thumb-wrap',
autoHeight:true,
multiSelect: true,
overClass:'x-view-over',
emptyText : "Fail",
tpl : tpl
});

new Ext.Panel({
renderTo: 'main',
items: [dv]
});

var task = {
run: function(){
imagestore.fireEvent('datachanged');
},
interval: 60000
}
Ext.TaskMgr.start(task);


sweet! :)