[CLOSED] Show window AFTER loader loads page

[rthiney]

Is there anyway to delay the showing of a window, whose content is loaded dynamically via loader, to only show when the page has fully loaded?

[Daniil]

Hi @rthiney,

Seems this does the trick.

<ext:Window ID="Window1" runat="server" Hidden="true">
    <Listeners>
        <AfterRender 
            Handler="this.hidden = false; 
                        this.load(); 
                        this.hidden = true;" 
            Delay="100" />
    </Listeners>
    <Loader runat="server" Mode="Frame" Url="http://ext.net">
        <Listeners>
            <Load Handler="this.target.show();" />
        </Listeners>
    </Loader>
</ext:Window>

Though, we cannot guarantee it works in all browsers and OS. Seems there was a case when a browser doesn't load a hidden iframe.

It might be better to show a load mask.

[rthiney]

Hi @rthiney,

Seems this does the trick.

<ext:Window ID="Window1" runat="server" Hidden="true">
    <Listeners>
        <AfterRender 
            Handler="this.hidden = false; 
                        this.load(); 
                        this.hidden = true;" 
            Delay="100" />
    </Listeners>
    <Loader runat="server" Mode="Frame" Url="http://ext.net">
        <Listeners>
            <Load Handler="this.target.show();" />
        </Listeners>
    </Loader>
</ext:Window>

Though, we cannot guarantee it works in all browsers and OS. Seems there was a case when a browser doesn't load a hidden iframe.

It might be better to show a load mask.

Hi Daniil,
This doesn't seem to work. I don't know what the URL will be until the user clicks on a choice in the page. I do have a load mask which I place on the div the users clicks on to load the specific page....


Right now, I'm doing:

        #{winEdit}.load({url:label+'.aspx',                    params:{'portfolioId':#{hidPortfolioId}.getValue(),
                        'documentId':#{hidDocumentId}.getValue(),
                        'fundId':fundId, 
                        'y':#{hidY}.getValue(),
                        'q':#{hidQ}.getValue() }}); 
                 
                    //waint half a second for the pge to load.  
                setTimeout(function() {#{winEdit}.center();#{winEdit}.show(card);  mask.hide();}, 1000);

But that 1 second delay too arbitrary...and using the Load listener of the doesn't seem to work either....the window never pops open, and there is no JS errors...

Do you have any other recommended approaches? Maybe a callback from the page that is being loaded?

[Baidaly]

Hello!

Do you have any other recommended approaches? Maybe a callback from the page that is being loaded?

Yes, I think you can do something like the following in the child page:

<ext:ResourceManager ID="ResourceManager1" runat="server">
    <Listeners>
        <DocumentReady Handler="
            window.parent.Ext.Msg.alert('Child page is loaded');
            "></DocumentReady>
    </Listeners>
</ext:ResourceManager>

[rthiney]

Hello!



Yes, I think you can do something like the following in the child page:

<ext:ResourceManager ID="ResourceManager1" runat="server">
    <Listeners>
        <DocumentReady Handler="
            window.parent.Ext.Msg.alert('Child page is loaded');
            "></DocumentReady>
    </Listeners>
</ext:ResourceManager>

Hi, that would work, how can I call a JS function I have defined in the parent window though?

[Baidaly]

Hi, that would work, how can I call a JS function I have defined in the parent window though?

Using window.parent you should be able to get the Global Context of parent window. So if your parent window has global function 'someFunction', you should be able to call it:

window.parent.someFunction();