Question

I have a grid with store: cdStore defined. The grid’s records are edited using a form which is bound to the grid data. When updating a record, I would like for the refreshed records to show in the grid.
Currently I have

handler : function() {
        areaForm.getForm().submit({
            params: { action: "update" }
            });
        cdStore.loadPage(cdStore.currentPage);
        areaGrid.doLayout();
        }

It seems like this fails sometimes and older data remains displayed in the grid – perhaps doLayout() is called before the page is fully loaded.

Can I trigger a doLayout on loadPage somehow?

Answer 1

// ...
cdStore.load({
  callback: function(){areaGrid.doLayout();},
  page: cdStore.currentPage
});

Update

I would appreciate a line or two with an explanation if you would be so kind

You said that “doLayout() is called before the page is fully loaded” and you were right. So the doLayout must be called after the data is loaded. The one way to do that is to use load method. You can pass array of options into this method:

store.load({
  page: 2,
  limit: 50,
  // and
  callback: function(){ /*do something*/ }
});

The function you pass as callback is called exactly after the data is loaded. So doLayout() put into callback produces correct behaviour.