Refresh ExtJS Grid

Question

I have a grid that I want to refresh. But when it refreshes, the fields in the table are not updated, fields are added to the end of the table. How can I make it so that the fields are only updated?

theStore.on('load', function () {
            theStore.data.each(function(item, index, totalItems ) {
                 this.getStore().add({
                    type: 'Book',
                    night: item.data['author'],
                    day: item.data['price']
                });
            });
        });

Answer 1

If I'm right in understanding you- you want to change:

this.getStore().add({
 type: 'Book',
 night: item.data['author'],
 day: item.data['price']
});

To:

this.getStore().loadRawData({
 type: 'Book',
 night: item.data['author'],
 day: item.data['price']
});

See here from the Sencha Docs

loadRawData( data, [append] ) Loads data via the bound Proxy's reader

Use this method if you are attempting to load data and want to utilize the configured data reader.

Answer 2

Try getting the store and then calling the reload method. http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.Store-method-reload