Delaying view render until data has loaded

[jlyman]

Is there a way by listening to the right events that you can get a store to reload and modify a view before it has been rendered to the screen, but after it has been added to the viewport? Currently, I have the following which will give me fresh data, but because the view as already been rendered, its height is not correct and will not scroll:

show: function () {
    console.log('Checklists view activated.');
    Ext.getStore('Checklists').load(function(records, operation, success) {
       console.log('Reloaded checklist items...');
       this.renderChecklists(); // This line programmatically adds new elements to the view
    }, this);
} 

Ideally, I'd like to try and get things to work as follows, but there may be a better way to do this, which I'm all open to. (Note that I'm not using a DataView bound to a store to do any of this.)

1. Checklist view gets requested to be shown via a Viewport.add()
2. Either the checklist controller or the checklist view catches that it is about to be shown
3. The store for checklists gets reloaded with fresh data
4. New elements are created programmatically for items in the checklists store
5. These new elements are added to the view
6. The view is shown to the user.

What's the best/right way to go about something like this? Thanks in advance all.

[mitchellsimoens]

Everything is async so you can listen to the load event on the store to add your item(s) to the Viewport.

[jlyman]

Isn't that similar to what's being done in the code sample above? The callback function on the store.load() calls this.renderChecklists(), which does do it's job and renders out the components. However, because it's async, the rendering process for the view is finished before the new components are created and added to the form.

Is there a way to force a repaint of a view so that it gets the right height and is scrollable if the new content is lengthier than the original?

[mitchellsimoens]

That callback should fire after the store has loaded so then if renderChecklists function adds the components to the Viewport then the rendering should happen after the store loads.

[jlyman]

So I suppose that I was just thinking about how to execute it incorrectly. From what the indomitable Mitchell has said, I reworked it so that my request to open a view fired an application event instead, which was handled by an event handler in the controller that reloaded the store and then opened the view once that was complete (via the callback on store.load()).

It seems that there isn't a way to do this as I was thinking earlier. Thanks Mitchell.