Problem with the navigations in an app. consists of tab group, tab, window, and view

Hi, i have this problem with drilldown or navigation to deeper level. I am creating an iOS app. and here's the code:

index.xml

<Alloy>
    <TabGroup id="mainTabGroup">
        <Require src="home" type="view"/> 
        <Require src="news" type="view"/>
        <Require src="events" type="view"/>
        <Require src="contact" type="view"/>
        <Require src="more" type="view"/> 
    </TabGroup> 
</Alloy>

index.js

$.mainTabGroup.open();

the problem lies around "more->packages->packagesSub". moreTab open a page with several buttons

more.xml

<Alloy>
    <Tab id="moreTab"> 
        <Window id="moreWin"> 
            <View id="moreView">            
                <Button id="btn_locate" call="locate" onClick="openPage"/>
                <Button id="btn_packages" call="packages" onClick="openPage"/>
                <Button id="btn_schedule" call="schedule" onClick="openPage"/>
                <Button id="btn_photos" call="photos"/>
                <Button id="btn_videos" call="videos"/>
                <Button id="btn_about" call="about" onClick="openPage"/>
            </View> 
        </Window> 
    </Tab>
</Alloy>

more.js

function openPage(e){
    var controller = Alloy.createController(e.source.call);
    $.moreTab.open(controller.getView());
}

here it is, the code for packages.xml and packagesSub.xml

packages.xml (it is actually consist of several table rows)

<Alloy>
    <Window id="packagesWin">
        <TableView id="packagesTable" rowHeight="50" touchEnabled="true">
                <TableViewRow id="tableRow" action="vma" hasChild="true" onClick="openSub">
                    <ImageView id="img_1"/>
                    <Label id="tableLabel">muay thai for all</Label>
                    <Label id="detail">open daily for all*</Label> 
                </TableViewRow>
                <TableViewRow id="tableRow" action="box" hasChild="true" onClick="openSub">
                    <ImageView id="img_2"/>
                    <Label id="tableLabel">boxing class</Label>
                    <Label id="detail">class for the punchers</Label> 
                </TableViewRow>
                <TableViewRow id="tableRow" action="tw" hasChild="true" onClick="openSub">
                    <ImageView id="img_3"/>
                    <Label id="tableLabel">the warrior</Label>
                    <Label id="detail">class for serious nak muay</Label> 
                </TableViewRow>
            </TableView>
    </Window>
</Alloy>

packages.js

function openSub(e) {
 
    var title;
 
    switch (e.source.action) {
        case 'vma':
            title = 'muay thai for all';
            break;
 
        case 'box':
            title = 'boxing';
            break;
 
        case 'tw':
            title = 'the warrior';
            break;
 
        default:
            break;
    }
 
 
$.packagesWin.open(Alloy.createController('packagesSub', {
       title: title
 }).getView());
 
}

packagesSub.xml

<Alloy>
    <Window id="packagesSubWin" title="will be changed"> 
 
<!--Muay Thai For All Class-->
        <View id="vma">
            <ImageView id="vmaBar"></ImageView>
        <Label>bla bla bla</Label>
            <Button class="btn_back" onClick="back">back</Button>                                   </View>
 
<!--Boxing Class-->
        <View id="box">
        <ImageView id="boxBar"></ImageView>
            <Label>bla bla bla</Label>
            <Button class="btn_back" onClick="back">back</Button>
        </View>
 
<!--The Warrior Class-->
    <View id="tw">
        <ImageView id="twBar"></ImageView>
            <Label>bla bla bla</Label>
            <Button class="btn_back" onClick="back">back</Button>        
    </View>
    </Window>
</Alloy>

packagesSub.js

var args = arguments[0] || {};
$.packagesSubWin.setTitle(args.title);
 
switch (args.title){
    case "muay thai for all":
        $.vma.visible = "true";
        $.box.visible = "false";
        $.tw.visible = "false";
        break;
 
    case "boxing":
        $.vma.visible = "false";
        $.box.visible = "true";
        $.tw.visible = "false";
        break;
 
    case "the warrior":
        $.vma.visible = "false";
        $.box.visible = "false";
        $.tw.visible = "true";
        break;
 
    case "pretty warrior":
        $.vma.visible = "false";
        $.box.visible = "false";
        $.tw.visible = "false";
        break;
 
    case "little warrior":
        $.vma.visible = "false";
        $.box.visible = "false";
        $.tw.visible = "false";
        break;
 
    default:    
        break;
}
 
function back(){
 
        $.packagesSubWin.close();
}
 
$.packagesSubWin.open();

The problem comes when you click one of the rows from "packages.xml" (muay thai for all class, boxing class, or the warrior class), it works fine and goes to "packagesSub.xml" (to open a page contains of more info about the classes).

The back button works fine too, but if you keep exploring the info by clicking another row (in packages.xml, after you click back button), sometimes the app gives you blank white page, with no navigation, or back button or whatsoever. Basically the app is stuck and going nowhere!

would you guys please show me a good direction? i hope i have given you enough codes

Thanks