[extjs] ExtJs Gridpanel store refresh

I am binding ExtJs Gridpanel from database and add "Delete" button below my gridpanel. By using the delete button handler, I have deleted selected record on gridpanel. But, after deleting, the grid does not refresh (it is deleted from database but shows on grid because of no refresh).

How can I refresh grid after delete handler ?

Combination of Dasha's and MMT solutions:

  Ext.getCmp('yourGridId').getView().ds.reload();

grid.store = store;
store.load({ params: { start: 0, limit: 20} });
grid.getView().refresh();

grid.getStore().reload({
  callback: function(){
    grid.getView().refresh();
  }
});

Another approach in 3.4 (don't know if this is proper Ext): You can have a delete handler like this, assuming every row has a 'delete' button.

handler: function(grid, rowIndex, colIndex) {
    var rec = grid.getStore().getAt(rowIndex);
    var id = rec.get('id');
    // some DELETE/GET ajax callback here...
    // pass in 'id' var or some key
    // inside success
    grid.getStore().removeAt(rowIndex);
}

Refresh Grid Store

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

This will reload the grid store and get new data.

reload the ds to refresh grid.

ds.reload();

I had a similiar problem. All I needed to do was type store.load(); in the delete handler. There was no need to subsequently type grid.getView().refresh();.

Instead of all this you can also type store.remove(record) in the delete handler; - this ensures that the deleted record no longer shows on the grid.

try this grid.getView().refresh();

It's better to use store.remove than model.destroy. Click handler for that button may looks like this:

destroy: function(button) {
    var grid = button.up('grid');
    var store = grid.getStore();
    var selected = grid.getSelectionModel().getSelection();

    if (selected && selected.length==1) {
        store.remove(selected);
    }
}