ExtJS removeAll doesn't work

Question

I have detected a weird behaviour of removeAll. I'm using ExtJS 4.2, I don't know if the same happens in other newer versions. I have this code inside of a tbar of a grid:

{
itemId: 'delete',
text: 'Delete',
iconCls: 'icon-delete',
disabled: true,
handler: function() {
    var selection = this.up('grid').getView().getSelectionModel().getSelection()[0];
    if (selection) {
        var numItems = storeProdutos.data.items.length;
        var store = this.up('grid').getStore();
        if(numItems != 0) {
            // point 2
            Ext.Msg.confirm('Confirm', 'Do you want to delete?', function(button){
                if(button === 'yes') {
                    gridProduto.getStore().removeAll();
                    store.remove(selection);
                    gridProduto.getStore().clearFilter();
                    gridProduto.getStore().load();
                    gridMercado.getSelectionModel().select(0);
                }
            });
        } else {
            store.remove(selection);
            gridProduto.getStore().clearFilter();
            gridProduto.getStore().load();
            gridMercado.getSelectionModel().select(0);
        }
    }
}
}

When I try to delete it appears the messagebox, and I say yes.
Then it deletes the store.remove(selection) but it doesn't delete the gridProduto.getStore.removeAll(). The weird thing is that in the php delete script everything went successfully.
The most weird thing is that if I put gridProduto.getStore.removeAll() on point 2 of the code and do everything again, it removesAll successfully!
I believe it has something to do with the messagebox.
Does anyone know how can I fix this?

PS: My store has a proxy for deletion with ajax. Something like this:

storeProdutos = Ext.create('Ext.data.Store',{
...
proxy: {
            type: 'ajax',
            api: {
                destroy: '/path/someScript.php'
            }
}
}

Answer 1

I guess you have autoSync set to true, because you are not calling sync() anywhere.

The problem then is the timing on the sync (triggered by removeAll) and load operation. If you put removeAll into point 2, removeAll will be executed and finished before you can click on the message box (which then triggers the load). But where it is, you start two Ajax calls: the removeAll call and the load call - both at the same time. Since stores start the calls asynchronously by default, only the last of the calls is executed.

You can resolve this either by making the store synchronously, which I consider a hack, or, better, by removing the autoSync from the store and loading only from the remove callback like this:

gridProduto.getStore().removeAll();
gridProduto.getStore().sync({
    callback:function() {
        store.remove(selection);
        gridProduto.getStore().clearFilter();
        gridProduto.getStore().load();
        gridMercado.getSelectionModel().select(0);
    }
});