loading mask shows behind a navigation window

[DavidHe1127]

Hi

I just found a problem with loading - If I try to show it in the root window of navigation window, it actually shows at the behind of root window in rather than the front. Any idea why?

A.xml

<Alloy>
    <!-- IOS -->
    <NavigationWindow id="nav" platform="ios" modal="true">
        <Window id="index" class="APP_WIN" title="Job List" tabBarHidden="true" onOpen="onWinOpen">
            <LeftNavButton platform="ios">
                <Button id="lBtn" onClick="onWinBack" style="Titanium.UI.iPhone.SystemButtonStyle.PLAIN" title="Job Status" />
            </LeftNavButton>
            <ListView id="jobList" onItemclick="onLstClick">
                <SearchView>
                    <Require src="search_view" />
                </SearchView>
                <ListSection id="lstSection"/>
            </ListView>
        </Window>
    </NavigationWindow>
</Alloy>

[FokkeZB]

I've got that working fine here. Just remember that if you call to show the loading mask before the NavigationWindow has finished opening, indeed it will be covered by it. So better listen to the open event of the NW and then show the loading mask.

[DavidHe1127]

No, it does not work with navigation window model set to true

See sample code below

index.js

function openNavRootWin() {
    var w2 = Alloy.createController("win2").getView("xxxxx");
    //Alloy.Globals.currTab.open(w2);
    w2.open();
}

index.xml

<Alloy>
    <TabGroup backgroundColor="white" onFocus="onTabGpFocus">
        <Tab id="tab1" title="Tab 1" icon="KS_nav_views.png">
            <Window id="win1" title="Tab 1">
                <Button id="label1" color="#999" onClick="openNavRootWin">Open Next Window</Button>
            </Window>
        </Tab>
    </TabGroup>
</Alloy>

win2.xml

<Alloy>
    <NavigationWindow id="xxxxx" platform="ios" modal="true">
        <Window id="win2" title="Window 2" backgroundColor="blue" tabBarHidden="true">
            <!-- <Require src="win2content"/> -->
            <Button title="CloseWin" onClick="CloseWin">
            <Button top="50" title="showActInd" onClick="showActInd">
        </Window>
    </NavigationWindow>
</Alloy>

win2.js

function showActInd() {
    var loading = Alloy.createWidget("nl.fokkezb.loading");
    loading.show("Bizzzzzz....", true);
}

function CloseWin() {
    $.xxxxx.close();
}

To recreate the issue, click on showActInd first and then close window by pressing closeWindow which you will see mask is actually hiding behind

Thanks

[FokkeZB]

Aha, that's because loading mask IS a window and windows can't open on top of a modal window.

So in the way loading mask works now it's not able to be used in modal windows.

You might look into alternatives using views instead.

[DavidHe1127]

Yep just realized that. Thanks Fokke