Reloading store data 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' } } }); 

What is the repository for some grid in which I show these 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 a record to my database, which works fine (if I reload the page, I see a new record added in my grid). What I want to do is reload the grid, so when I save this record in my database, the repository and grid are updated and show the newly added record, without having to reload the whole page.

I tried:

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

and...

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

and...

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

and I also tried setting up the repository as Ext.data.JsonStore, but it does nothing.

But nothing works, I searched all over the Internet for this to no avail.

Any help is appreciated.

Answer 1

This should definitely work:

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

Do you get any javascript errors when using the above syntax? If so, looking at a specific error message may give some clues.

In addition, ALWAYS ALWAYS use the Chrome Developer Tools (or Firebug or IE Developer Toolbar if you like Firefox / IE). In this case, you want to know if the AJAX request goes to / url / to / my / json / encoded / results. This will at least tell you if the call to upgrade the store will make it on your server.

I assume this is not the case, and you are most likely generating an error message. Perhaps something like the strings "Cannot call getStore from undefined"

This will at least tell you that you have not received a link to your grid. From there, check that you do not duplicate "myGridID" for another element or something stupid.

You can output some information to the Chrome Developer Tools console to debug it, starting with:

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

See if it is undefined, or returns links to the grid. If it is undefined, then you are probably either duplicating the identifier, or perhaps trying to reload the grid before the component has actually been created (looking at the code in the larger context of your application will help determine this).

If it successfully returns a link to the grid component, continue moving along the line:

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

In any case, this probably explains too much of what you probably already decided now. Perhaps this will be useful to someone else.

Answer 2

Try it, it worked for me, tested on version 3.x

Ext.getCmp ('idMyGrid'). store.load ();

also you can use

Ext.getCmp ('idMyGrid'). store.reload ();

if you want to pass parameters with a request for download

Ext.getCmp ('idMyGrid'). store.load ({params: {paramName: paramValue}}); Ext.getCmp ('idMyGrid'). store.reload ({params: {paramName: paramValue}});

Answer 3

if you want to reload your data, you should see the changes. I mean, put these codes together:

  Ext.getCmp('idMyGrid').getStore().load(); Ext.getCmp('idMyGrid').getView().refresh(); 

This works for me. I hope this works for you too.

From Chile Chorizo, Saluds.

Answer 4

see my code:

var response = Ext.decode (result); // JSON from somewhere

store.proxy = new Ext.ux.data.PagingMemoryProxy (answer);

grid.store = store;

store.load ({params: {start: 0, limit: 20}});

grid.getView () updates () ;.