appcelerator-developer-relations/Template.Tabbed — Issue #3: I just found a terrible, terrible bug.
Author: Methemer
Created: 2012-02-17 19:14:46+00:00
State: open

**For the past two days** I've been trying to figure this out, in the end I drilled the error down this deep:

## Template.Tabbed : Example 1

Only modification I have made is for the AppWindow to call itself on button click.

*/ui/AppWindow.js*
```javascript
function AppWindow(title) {
var self = Ti.UI.createWindow({
title:title,
backgroundColor:'white'
});

var button = Ti.UI.createButton({
height:44,
width:200,
title:L('openWindow'),
top:20
});
self.add(button);

button.addEventListener('click', function() {
//containingTab attribute must be set by parent tab group on
//the window for this work
self.containingTab.open(new AppWindow("Hello"));
});

return self;
};

module.exports = AppWindow;
```

*/ui/AppTabGroup.js*
```javascript
function AppTabGroup() {
//declare module dependencies
var AppWindow = require('ui/AppWindow');

//create module instance
var self = Ti.UI.createTabGroup();

//create app tabs
var win1 = new AppWindow(L('home')),
win2 = new AppWindow(L('settings'));

var tab1 = Ti.UI.createTab({
title: L('home'),
icon: '/images/KS_nav_ui.png',
window: win1
});
win1.tab = tab1;

var tab2 = Ti.UI.createTab({
title: L('settings'),
icon: '/images/KS_nav_views.png',
window: win2
});
win2.tab = tab2;

self.addTab(tab1);
self.addTab(tab2);

return self;
};

module.exports = AppTabGroup;
```

*tab instead of containingTab*
## Template.Tabbed: Example2

Only modification I have made is for the AppWindow to call itself on button click.

*/ui/AppWindow.js*
```javascript
function AppWindow(title) {
var self = Ti.UI.createWindow({
title:title,
backgroundColor:'white'
});

var button = Ti.UI.createButton({
height:44,
width:200,
title:L('openWindow'),
top:20
});
self.add(button);

button.addEventListener('click', function() {
//containingTab attribute must be set by parent tab group on
//the window for this work
self.tab.open(new AppWindow("Hello"));
});

return self;
};

module.exports = AppWindow;
```

*/ui/AppTabGroup.js*
```javascript
function AppTabGroup() {
//declare module dependencies
var AppWindow = require('ui/AppWindow');

//create module instance
var self = Ti.UI.createTabGroup();

//create app tabs
var win1 = new AppWindow(L('home')),
win2 = new AppWindow(L('settings'));

var tab1 = Ti.UI.createTab({
title: L('home'),
icon: '/images/KS_nav_ui.png',
window: win1
});
win1.containingTab = tab1;

var tab2 = Ti.UI.createTab({
title: L('settings'),
icon: '/images/KS_nav_views.png',
window: win2
});
win2.containingTab = tab2;

self.addTab(tab1);
self.addTab(tab2);

return self;
};

module.exports = AppTabGroup;
```

In the first example, when a window in the tabgroup is opened, another window can't be opened on top of it.
In the second example I can open unlimited number of windows.

Seems a bit off, due the only difference is the variable name.