Refreshing a dataview in Panel in extjs 3.4

Question

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!

Answer 1

You need to refresh your dataview. I suggest putting it into a variable.

var dataView = new Ext.DataView({
    store: this.imgStore,
    autoScroll: true,
    id: 'imgList',
    tpl: new Ext.XTemplate(
        .
        .
        .
    ),
    listeners: {
        afterrender: function() {
            // do something                          
        }
    }
});

Then add a listener in your store:

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

// Define your dataView here

this.imgStore.on('load', function() {
    dataView.refresh();    
});

Note: Code is not tested.