Refreshing a dataview in Panel

[k_river]

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]

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.