Opening a New Window from a Sliding Menu

Hi guys,

So i've got a basic 'Facebook' style left sliding menu working in my iOS app.

I can scroll through a list of menu items, and toggle the menu off by tapping the icon in the top left hand corner.

So, now I need to start connecting windows or views to each menu item. So when each row is tapped it'll slide away the menu and load the correct window in the main view.

The issue I have at the moment is that when you tap the menu table row, the window loads in over the top (i'm assuming) of the app, rendering the menu button useless, despite bing able to see it, it can't be clicked.

Anyone got any ideas?

I'm trying to load the windows into my navgroup, perhaps this is my mistake?

Code below:

//// ---- Menu window, positioned on the left
var menuWindow = Ti.UI.createWindow({
    top:0,
    left:0,
    width:250
});
 
 
//// ---- Menu Table
var section1 = Ti.UI.createTableViewSection({ headerTitle: 'Header 1' });
section1.add(Ti.UI.createTableViewRow({ title: 'Tracker', leftImage:'icons/312-waypoint.png', color:'#FFF' }));
section1.add(Ti.UI.createTableViewRow({ title: 'Add', leftImage:'icons/436-plus.png', color:'#FFF' }));
section1.add(Ti.UI.createTableViewRow({ title: 'History', leftImage:'icons/333-backintime.png', color:'#FFF'  }));
 
var section2 = Ti.UI.createTableViewSection({ headerTitle: 'Header 2' });
section2.add(Ti.UI.createTableViewRow({ title: 'Add', leftImage:'icons/436-plus.png', color:'#FFF'  }));
section2.add(Ti.UI.createTableViewRow({ title: 'View', leftImage:'icons/454-pounds2.png', color:'#FFF'  }));
 
 
 
 
// Tableview
var tableView = Ti.UI.createTableView({
    data:[section1, section2],
    backgroundColor:'#666',
    color:'#FFF'
});
menuWindow.add(tableView);
 
// move the window open down a bit to prevent flicker
menuWindow.open();
 
//// ---- Window with navigationGroup
var navWindow = Ti.UI.createWindow({
    width:'100%' // Set the width of the sliding window to avoid cut out from animation
});
navWindow.open();
 
// Main window
var win = Ti.UI.createWindow({
    title:'My App',
    backgroundColor:'#FFF',
    barColor:'#2a3990',
    moving:false, // Custom property for movement
    axis:0 // Custom property for X axis
});
 
// NavigationGroup
var navGroup = Ti.UI.iPhone.createNavigationGroup({
    window:win
});
navWindow.add(navGroup);
 
// Top left menu selection button
var menuButton = Ti.UI.createButton({
    image:'icons/399-list1.png',
    toggle:false // Custom property for menu toggle
});
win.setLeftNavButton(menuButton);
 
// event listeners for the Menu button
menuButton.addEventListener('click', function(e){
    // If the menu is opened
    if(e.source.toggle == true){
        navWindow.animate({
            left:0,
            duration:300,
            curve:Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
        });
        e.source.toggle = false;
    }
    // If the menu isn't opened
    else{
        navWindow.animate({
            left:250,
            duration:300,
            curve:Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
        });
        e.source.toggle  = true;
    }
});
 
win.addEventListener('touchstart', function(e){
    // Get starting horizontal position
    e.source.axis = parseInt(e.x);
});
win.addEventListener('touchmove', function(e){
    // Subtracting current position to starting horizontal position
    var coords = e.source.convertPointToView({x:e.x, y:e.y}, win);
    var coordinates = parseInt(coords.x, 10) - e.source.axis;
    // Detecting movement after a 20px shift
    if(coordinates > 20 || coordinates < -20){
        e.source.moving = true;
    }
    // Locks the window so it doesn't move further than allowed
    if(e.source.moving == true && coordinates <= 250 && coordinates >= 0){
        // This will smooth the animation and make it less jumpy
        navWindow.animate({
            left:coordinates,
            duration:20
        });
        // Defining coordinates as the final left position
        navWindow.left = coordinates;
    }
});
win.addEventListener('touchend', function(e){
    // No longer moving the window
    e.source.moving = false;
    if(navWindow.left >= 75 && navWindow.left < 250){
        // Repositioning the window to the right
        navWindow.animate({
            left:250,
            duration:300
        });
        menuButton.toggle = true;   
    }else{
        // Repositioning the window to the left
        navWindow.animate({
            left:0,
            duration:300
        });
        menuButton.toggle = false;
    }
});
 
// Control the row clicks
tableView.addEventListener('click',function(e){
 
    var childWin = Titanium.UI.createWindow({
        url:'testwindow.js', 
        title:'Yes' 
    });
 
    Ti.API.info('Clicked on '+e.row.title);
 
    childWin.add(navGroup);
 
    childWin.open();
 
 
});

The testwindow.js looks as follows:

alert("Window Opened");
 
var window = Titanium.UI.currentWindow;
 
// Create the label 
var user_lbl = Titanium.UI.createLabel({
    text: 'Hello World',
    left: 55,
    width: 200,
    height: 16,
    textAlign: 'left',
    color: '#000',
    font: {
        fontFamily: 'Helvetica Neue',
        fontSize: 14,
        fontWeight: 'bold'
    }
});
window.add(user_lbl);

Simon