Sencha-touch : refresh list : store

Question

I have a list of news in a Ext.List inside a panel

prj.views.NewsList = Ext.extend(Ext.Panel, {
    layout: 'card',
    initComponent: function() {     
        this.list = new Ext.List({            
            itemTpl: '......',
            loadingText: false,
            store: new Ext.data.Store({
                model: 'News',
                autoLoad: true,
                proxy: {
                    type: 'ajax',
                    url: '.....',                
                    reader: {
                        type: 'json',
                        //root: ''
                    }
                },
                listeners: {
                    load: { fn: this.initializeData, scope: this }
                }
            })
        });

        this.list.on('render', function(){
            this.list.store.load();
            this.list.el.mask('<span class="top"></span><span class="right"></span><span class="bottom"></span><span class="left"></span>', 'x-spinner', false);
        }, this);

        this.listpanel = new Ext.Panel({
            items: this.list,
            layout: 'fit',            
            listeners: {
                activate: { fn: function(){
                    this.list.getSelectionModel().deselectAll();
                    Ext.repaint();
                }, scope: this }
            }
        })

        this.items = this.listpanel;    
        prj.views.NewsList.superclass.initComponent.call(this);
    },
});

Ext.reg('newsList', prj.views.NewsList);

In a toolbar setup in a dockedItem, I have a icon to refresh the list.

items: [
    {
        iconCls: 'refresh',                             
        handler: function() {                                   
        prj.view.NewsList.list.store.read()
        }   
    },
]

but prj.view.NewsList return undefined! How can I get the list to do a refresh of the store?

Answer 1

Even I faced a similar problem. I am posting my answer hope this helps someone.

I have a search bar in to search data. (my search is taking place at server and the results are sent back to me in response to my GET request.

Basically I just had to change the URL for my store

WHAT ALL I TRIED:

1. myList.refresh(),
2. myStore.load();
3. clearing the store and then loading it
4. removing the list and adding it again and forcing it to re render (using doLayout())

Nothing worked...

just adding SINGLE line fixed my problem

    function handleSearch(strSearchText)
    {   
    //myStore.loadData([],false); /tried to clear the store and reloading it
    if(strSearchText !='')
    {
        searchString = '?search='+strSearchText;
        searchURL = searchURLBasic+ searchString;
    }else{
        searchURL = searchURLBasic;
    }
    console.log('search URL: ' + searchURL);
    myStore.proxy.url =searchURL;           // this was one magical line of code that saved my life
    myStore.load();
}

THanks SO for support.

Answer 2

Call this line on your refresh button

Ext.StoreMgr.get('newsStore').load()

The list is automaticaly refresh when you call the load() method on the store. The store is linked to the list.

Example:

items: [
    {
        iconCls: 'refresh',     
        handler: function(event, btn) {
            Ext.StoreMgr.get('newsStore').load();
        }           
    },
]

Answer 3

I do this when changing the store and it works like a champ

var yourbutton = new Ext.Panel({
    listeners: {
        afterrender: function(c){
            c.el.on('click', function(){
                YourList.update();
                YourList.bindStore(newStore);
            });
        }
    }
});