Results 1 to 2 of 2

Thread: Refreshing a dataview in Panel

  1. #1
    Sencha User
    Join Date
    Aug 2014
    Posts
    1

    Default Refreshing a dataview in Panel

    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:


    Code:
        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!

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,448

    Default

    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.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •