Reloading data from a store in ExtJS 4

Question

I have a store:

var store = new Ext.data.store({
                autoLoad: true,
                autoSync: true,
                model: 'myModel',
                proxy: {
                    type: 'rest',
                    url: '/url/to/my/json/encoded/results',
                    reader: {
                        type: 'json',
                        root: 'results'
                    },
                    writer: {
                        type:'json'
                    }
                }
            });

Which is the store for some grid in which I display those results. My grid is configured as follows:

var myGrid = new Ext.grid.Panel({
                id:'myGridID',
                layout:'anchor',
                border:false,
                title:'My Grid',
                width:412,
                store:store,
                heigth:300,
                frame:false,
                .... etc

At some point I add an entry to my database, which works just fine (if I reload the page I see the newly added record in my grid). What I want to do is reload the grid so when I save that entry into my database the store and the grid refresh themselves and display the newly added record without me having to reload the whole page again.

I tried:

Ext.getCmp('myGridID').getStore().reload();

and...

Ext.getCmp('myGridID').getStore().load();

and...

Ext.getCmp('myGridID').getView().refresh();

and I also tried setting the store as Ext.data.JsonStore but it does nothing.

But nothing works, I've been searching all over the internet for this unsuccessfully.

Any help is appreciated.

Answer 1

This should definitely work:

Ext.getCmp('myGridID').getStore().load();

Are you getting any javascript errors when you use the above syntax? If so, seeing the specific error message might give some clues.

Also, ALWAYS ALWAYS use Chrome developer tools (or Firebug or IE Developer Toolbar if you love Firefox/IE). In this case, you want to see if an AJAX request is going out to /url/to/my/json/encoded/results. That will at least tell you if the call to refresh the store is making it to your server.

My guess is that it's not, and you most likely have an error message being generated. Probably something along the lines of "Cannot call method 'getStore' of undefined"

This would at least let you know that you're not successfully obtaining a reference to your grid. From there, check to make sure that you didn't duplicate "myGridID" for another element or something silly like that.

You can output some info to the Chrome developer tools console to help debug, starting with:

console.log(Ext.getCmp('myGridID'));

See if it's undefined, or returns a references to the grid. If it's undefined then you're probably either duplicating the id, or maybe attempting to reload the grid before the component has actually been created (seeing your code in a bigger context of your application would help determine that).

If it successfully returns a reference to the grid component, then keep going down the line:

console.log(Ext.getCmp('myGridID').getStore());

Anyway, that's probably way too much explanation for something you've probably already solved by now. Maybe it will be helpful to someone else though.