How to clear the grid in Extjs

Question

I have a GridStore in Extjs which can store records with two grid columns. I have a problem when one record exists in Grid, if i delete the grid its been deleted successfully in server side, but that still exists in Grid.

Sample code:

    xtype: 'grid',
    store: 'SampleStore',
    border: false,
    width : 542,
    ref: '../sampleGrid',
    id: 'sampleGrid',
    columns: [
       {
       xtype: 'gridcolumn',
       dataIndex: 'name',
       header: 'Name',
       sortable: true,
   .............
    view: new Ext.grid.GridView({
    forceFit: true
    })

Thanks for help in advance.

Amadeus

I wouldn't use the forceFit option in the view. It's recommended to use flex on the grid itself. (not related to your issue but it's a suggestion) – Tedmund

Answer 1

Make sure you are using:

grid.getStore().remove(record); //remove record from grid
grid.getStore().sync(); //sync with server

If you want to remove all items, do:

grid.getStore().removeAll();
grid.getStore().sync();

But be careful! That will delete everything!

Sharpen

Don't forget to refresh the grid when store is cleared. If you don't do that, strange behaviour may happen. grid.view.refresh() – Dormie

Answer 2

This worked for me:

Ext.ComponentQuery.query('#yourGrid')[0].getStore().removeAll();

Hope it helps.

Brindle

Answer 3

var usrStore = Ext.StoreManager.lookup('LES.ossi.ossi-sampleapp.store.MainStore');

usrStore.removeAll();

Ahmadahmar

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Noria