extjs4 check window's last child component afterlayout event

Question

I was assigned to create an extjs4 app which can be used on desktop browsers and on mobile browsers. I know that extjs4 is not really for mobile (definitely works on mobile but there's a huge performance difference) but we are also supporting our website for mobile for temporary usage (Future plan: we'll create a Sencha Touch 2 version of this).

Anyways, I'm currently working on improving the responsiveness of the app. Responsiveness in terms of button clicks, opening windows, etc. I would like to show a splash message upon opening an Ext.Window components. This splash message will be visible until all components of the window have been created. So, I was trying to achieve this by listening to the afterlayout event of the window.

On my custom component, which extends Ext.Window, I have this code:

constructor : function() {
    var me = this;
    ...

    me.callParent(arguments);

    me.on('afterlayout', {
        console.log('AFTER LAYOUT');

        if (mySplash != null)
            mySplash.hide();
    }
}

I have observed that afterlayout events have been called multiple times. So, I have checked the api documentation of Sencha ExtJS 4.2 about afterlayout event of Ext.Window. And it says:

Fires when the components in this container are arranged by the associated layout manager.

So, how would I check the last afterlayout event of my window/popup? I need this so that if I have determined this, I could have called here my close splash function.

Please help. Thanks in advance.

Answer 1

Have you tried afterRender? As per the documentation afterRender fires after the component finish rendering..

Answer 2

In case of a window you should be fine by using the show event which get fired as soon as the windows is ready and get showed. Note the following chain:

instantiate -> render -> layout -> show

This is valid for all components!

• show is always fired once (but not all components will fire the event for sure due to performance reasons)
• layout events get fired each time the layout need to correct something. But initially (normally) only once. If this occurs more than once most likely a child triggers the layout of its parent either at creation time or after a user interaction.
• render is always fired once until rerendering is triggered explicitly but that happens not often.

So to show anything until the window is ready I would apply it either right before creating the window either by the caller, in the window initComponent method or if you need this more often you could also do it with a plugin. All three options can also create the show listener (you should either managed the listener or apply it with {single:true}) which remove more splash again.

Answer 3

As a workaround, Ext.util.DelayedTask can be used, working sample here: https://fiddle.sencha.com/#fiddle/102

The idea is to execute the delayed task on the last-afterLayout

Answer 4

It sounds like boxready is the event you need, not afterrender.