PDA

View Full Version : Refreshing a dataview in Panel



k_river
27 Aug 2014, 4:18 PM
I have an extjs `Panel` component that contain a `dataview` item. I use this to display the images from a store. It works as expected during the first load. But later when I reload the `imgStore` with new image url's (which occurs when user searches and loads a different city) the view does not refresh. Can someone point me in the best way to refresh the `panel/dataview` item when the associated datastore is refreshed?


The actual code has more than one item in the panel and many other buttons and toolbars. Please see the relevant part of the code below:



init : function() {

// image store
this.imgStore = new Ext.data.JsonStore({
idProperty : 'imgId',
fields: [
{name : 'imgId', type:'integer', mapping : 'imgId'},
{name : 'url', mapping: 'url'}
],
data : [],
});

// load images
Ext.each(myImgStore.data.items, function(itm, i, all) {
this.imgStore.loadData(itm.data, true);
});

// add to a dataview in a panel
this.myPanel = new Ext.Panel({
autoScroll : true,
items: [
{
xtype : 'dataview',
store: this.imgStore,
autoScroll : true,
id: 'imgList',
tpl: new Ext.XTemplate(
'<ul class="imgGrid">',
'<tpl for=".">',
'<li>',
'<div class=\"imgThumbnail\" imgId="{imgId}">',
'<img src="{url}"/>',
'</div>',
'</li>',
'</tpl>',
'</ul>',
'<div class="x-clear"></div>'
),
listeners : {
afterrender : function() {
// do something
}
}
}]
});
// add this to the center region of parentpanel
Ext.getCmp('parentPanel').add([this.myPanel]);
this.myPanel.doLayout();
}


Everytime the store is reloaded, I want the dataview to be refreshed. I'm using extjs 3.4 version.


Thanks!

mitchellsimoens
29 Aug 2014, 7:58 AM
Of course the DataView should refresh itself when the store loads, I haven't seen a case in my apps where this did not just work. You can execute the refresh method on the DataView.