[CLOSED] How to show a progress bar when showing an maskevent

[feanor91]

Hello

I have something like that in my code

<DirectEvents>
	<Click OnEvent="MyLoadFunction" Timeout="30000000">
		<EventMask ShowMask="true" > 
		</EventMask>
	</Click>
</DirectEvents>

Of course it works fine. But I wish to show a progress bar in place of the default message updated by a callback function.

I already create such functionnality for progress bar, but here, my problem is how to display the progress bar in the default event mask object.

A solution?

[fabricio.murta]

Hello @feanor91!

This is just an idea, as you want a really custom progress bar & masked user experience in your page. Might just work!

So, what about, instead of using a mask, displaying a borderless, titleless (or with a title "Operation progress" or something like that) modal window with the progress bar component. By modal I mean that the window, upon being displayed, will gray out the rest of the page surrounding it. Here's an example using a modal window: Load external website into an <ext:Window />.

I believe you already know how to update the progress bar in real time, but just to be sure: Progress Bar Server side Update. There's also Progress Bar Client side Update.

Another approach would be just setting no mask message/animation, adding the progress bar in the center of the screen, and pushing it to front through CSS's z-index attribute. But this sounds a little more "hacky".

[feanor91]

Hi,

The modal window is a very good idea. For now, I put the progress bar in one window and fight ro show mask on all the window as I manage to mask body but fail to unmask it, and, by the way, masking body does not mask windows displayed in the desktop, so, I will try your idea and report.

Thanks.

[feanor91]

Hello I'm not able to remove all the bow in title window. Here the definition :

               <ext:DesktopModule ModuleID="ProgressBar">
                    <Window>
                        <ext:Window
                            ID="wndProgressBar"
                            runat="server"
                            Width="300"
                            Frame="false"
                            Border="false"
                            Height="60"
                            Layout="Fit"
                            Hidden="True"
                            ExpandOnShow="True"
                            Closable="false"
                            Maximizable="False"
                            Resizable="false"
                            Minimizable="False"
                            Modal="True">
                            <Items>
                                <ext:ProgressBar ID="prbarVMLoading" runat="server" Width="250" MarginSpec="0 5 0 5" />
                            </Items>
                        </ext:Window>
                    </Window>
                </ext:DesktopModule>

With this code, when opening window I get the error message :

Uncaught TypeError: Cannot read property 'lastBox' of undefined

And worst, look where the window is diplayed into the desktop:



If I put the closable tag to true, then it works but I have the title part and of course the close button.

Else, it works fine.

[fabricio.murta]

Hello @feanor91!

It seems to work fine to me if I define the window inside the desktop's <DesktopConfig /> <Contents /> or <Items /> tags.

This window definition looks to work for me:

<ext:Window runat="server"
    ID="wnd1"
    Width="200"
    Height="200"
    AnimCollapse="false"
    Border="false"
    Resizable="false"
    HideMode="Offsets"
    Closable="false"
    Collapsible="false"
    Maximizable="false"
    Minimizable="false" Hidden="true"
    Modal="true">
    <HeaderConfig runat="server" Hidden="true" />
    <Items>
        <ext:Label runat="server" Text="Test" />
    </Items>
</ext:Window>

If you are not certain how to proceed, please provide a runnable example with your current desktop setting so we can give you exact advice.

[feanor91]

Hi,

It works fine. Thank you.

[feanor91]

Hello

I just see something that bored me.

When the windo is open, it is shonw in the taskbar of the deskop. Is it a parameter allowing to avoid to display window in the taskbar?