[solved] How can I close the active Tab from within the tab itself

[ahoekie]

Hi

I want to give users the option to save their form. After this is done a dialog appears with the message: "save completed". After that a dialog appears if users wan't to close this window (the current tab). But I can't seem to find a working way to get this done.

So my question is:

How can I close the current tab from within the page that is loaded inside of that tab.

Any help would be great!!

If you need additional information to answer my question please let me know.

[jsakalos]

Search the forum for close+tab. There are some threads on that.

[ahoekie]

I looked at several articles in the forum, however none of the ones I found matched my question. Mosty they are going about creating a dialog box when closing the Tab with the X button.

What is want is a function to get the current opened TabPanel and close the panel.

[jsakalos]

http://extjs.com/deploy/ext/docs/output/Ext.TabPanel.html#hideTab (http://extjs.com/forum/../deploy/ext/docs/output/Ext.TabPanel.html#hideTab)

There is also removeTab method.

[ahoekie]

I looked at those api docs but I don't know how to access the tabpanel object.

I will add some additional information to clarify my problem.

main.html page:
I have a left region with a tree structure which acts as a menu. Whenever a link is clicked in the tree it will be openen in the center region in a new tab (iframe based). The code which is used to execute the opening of a new tag is.

Code that will be executed when link is clicked:


that.addIframePanel('addStudio', 'Anime Studio Toevoegen', 'addStudio.html');


Underlying functions used to create tab


addPanel : function(id, title, href) {
var newpanel = 'cpanel-'+id;
if (!layout.showPanel(newpanel)) {
var newpanel = new Ext.ContentPanel(newpanel, {
title: title,
closable: true,
autoCreate: true,
fitToFrame: true,
url: {
url:href,
scripts:true
},
loadOnce: true
});
layout.add('center',newpanel);
}
},
addIframePanel : function(id, title, href) {
var newpanel = 'iframepanel-'+id;
if (!layout.showPanel(newpanel)) {
var newiframe = new Ext.ContentPanel(newpanel, {
title: title,
closable: true,
autoCreate: true,
fitToFrame: true
});
Ext.DomHelper.append(newpanel, {
tag: 'iframe',
src: href,
width: '100%',
height: '100%'
});
layout.add('center',newiframe);
}



new 'addStudio page is opened in a new tab:
The new HTML file is added as an tab and loads its own scripts.
On this page a form will appear where users can enter data which will be saved by pressing a button.



// Save handler
function saveItem(btn) {
if(btn === 'yes') {
if (adminForm.isValid()) {
if(editModeOn === true) {
toggleEditMode();
}
/*
var frmRegister = document.getElementById(adminForm.id);
frmRegister.submit();
*/
adminForm.submit({url:submitFormUrlAjax+String(Date.parse(Date())/1000),
success:formSubmitSuccess,
failure:formSubmitFailure
});
}
}
}

function formSubmitSuccess(form, action) {
Ext.MessageBox.alert('Gelukt', 'De wijzigingen zijn opgeslagen!' );
Ext.MessageBox.confirm('Gelukt', 'De wijzigingen zijn opgeslagen!<br />Wilt u dit scherm sluiten', closeTab);
}

function closeTab(btn) {
if(btn === 'yes') {


Code looking for must come here
}
}


The bold part is what I am looking for. So I want to get the right TabPanel / Content Panel... and close it.

I hope it is clear now what I want to do.

[jsakalos]

If you have it in layout then:



layout.getRegion('center').getTabs().hideTab(0)

[ahoekie]

That is the problem that I'm running into...

The layout var is only present in main-app.js not which is main page.html and the other code which closes the the window is present in the window that is opened in the tab.


so the code examples given are both on different pages... So I can't dirrectly access the layout var.

So the option you gave me is not going to work here.

[haibijon]

You'll need to store a window-level reference to the layout then, and access it from the iframe's parent window object like so:



var layout = new Ext.BorderLayout ... etc...

// set the global reference
window.layout = layout;


Then from within the iframe



// To get the reference to the tab panel simply...
var tabpanel = parent.layout.getRegion('center').getTabs();

// and to remove the active tab from the tabpanel
tabpanel.removeTab( tabpanel.getActiveTab().id );

[jsakalos]

Aaah, now I fully understand. Have you watched Douglas Crockford's videos on javascript? He explains basic and advanced javascript programming techniques there including the scope of the visibility of variables, OO programming, etc.

They are surely worth to watch. ;)

[ahoekie]

That was the option I was looking for... thanks...

However now I'm running into a new problem. When the tab is closed and I press the same menu option (the link) again a new screen will not be opened.

It gives the following error in firebug



tab has no properties
showPanel(Object el=Object closable=true loaded=false active=false)ext-all-debug.js (line 23245)
showPanel("iframepanel-addStudio")ext-all-debug.js (line 22596)
addIframePanel("addStudio", "Anime Studio Toevoegen", "addStudio.html")main-app.js (line 177)
(no name)([Node n-addStudio] childrenRendered=false rendered=true, Object browserEvent=Event mouseout button=0 shiftKey=false)main-app.js (line 108)
fire()ext-all-debug.js (line 1426)
fireEvent()ext-all-debug.js (line 1236)
fireEvent("click")ext-all-debug.js (line 10652)
fireEvent()ext-all-debug.js (line 18004)
onClick(Object browserEvent=Event mouseout button=0 shiftKey=false)ext-all-debug.js (line 18081)
h(Object browserEvent=Event mouseout button=0 shiftKey=false)ext-all-debug.js (line 1547)
Event(click clientX=0, clientY=0)yui-utilities.js (line 13)
[Break on this error] if(tab.isHidden()){

It seems that the tab is not really destroyed and it can't recreate a new one...
The other links still work as they should.

[haibijon]

Replace the following:


tabpanel.removeTab( tabpanel.getActiveTab().id );

with:



var tab = tabpanel.getActiveTab();
tabpanel.removeTab( tab.id );
tab.destroy(true);

This will first remove the tab from the tab panel, and then destroy the tab and its dom, your code should run fine after that.

It seems like alot of these methods (removeTab, and Ext.TabPanelItem.prototype.destroy) are missing from the Docs.

[ahoekie]

I tried the above code but still it is not working.

I get the following message in firebug:

tab.destroy is not a function
[Break on this error] undefined

And also the problem persists. Tab is closed but I can't open a new one from the same one as the one that was closed.

[tryanDLS]

There is no destroy method on a TabPanelItem. Part of your problem may be that you're adding Panels, but trying to remove the TabPanel. This may be leaving artifacts of the Panel. Instead try removing the Panel object from the layout and re-creating.

[ahoekie]

Just to let you guys know (and other people struggling with this issue) I solved the problem by using the following code:


// get the active panel
var panel = parent.layout.getRegion('center').getActivePanel();

// remove active panel
parent.layout.getRegion('center').remove(panel);

I want to thank everbody who tried to help me!!

[haibijon]

Awsome, thanks, ended up running into the same issue myself! =D>