PDA

View Full Version : Closing tabs



Angilo
8 Sep 2010, 8:56 AM
Hi,

I wonder how to close tabs without having to reinstantiate the child components.

I set the tabs default autoDestroy to false. But of course, the tabs disappears, but the grid I recently added, did not.

My creation works as following:


var Tabs = new Ext.TabPanel({
//renderTo:'tabs',
resizeTabs:true,
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true,
activeTab: 0,
autoDestroy: false,
width:940,
height:765,
defaults: {autoScroll:true, closable: true, autoDestroy: false},
//items: [CustomersListingEditorGrid],
plugins: new Ext.ux.TabCloseMenu()
});

function addTab(addObject){
Tabs.add(addObject);
addObject.show();
}


My layout:



new Ext.Viewport({
layout: 'border',
title: 'Ext Layout Browser',
items: [{
layout: 'border',
id: 'top',
border: false,
split:true,
margins: '30 0 0 0',
height: 30,
region: 'north',
items: [
{
xtype: 'box',
region: 'north',
applyTo: 'header',
height: 30,
},
{
xtype: 'toolbar',
region: 'center',
bodyStyle: 'padding-bottom:15px;background:#eee;',
height: 30,
margins: '-30 0 0 0',
items: [
{
xtype: 'tbspacer'
},{
xtype: 'tbbutton',
text: 'Home',
handler: function(btn){
btn.disable();
}
},
{
xtype: 'tbspacer'
},
{
xtype:'splitbutton',
text: 'Customers',
handler: function(btn) {
addTab(CustomersListingEditorGrid);
},
menu: [{text: 'Credit'}]
}]
}]

},
{
layout: 'border',
id: 'layout-browser',
region:'west',
border: false,
split:true,
margins: '2 0 5 5',
width: 275,
minSize: 100,
maxSize: 500,
items: [favoritesPanel, helpPanel]
},
contentPanel
],
renderTo: Ext.getBody()
});


As you can see, by clicking in the menu, a grid is added as a tab:
addTab(CustomersListingEditorGrid);

What is going wrong here?

More information:
When autoDestroy is true, the grid can be closed, but it can't be added for the second time. Error: (b.getPositionEl().dom is undefined).

When autoDestroy is false, the tab is closing, but the grid is still visible.

Does anyone have advice for me?

Thanks in advance!


[EDIT]

What I also tried, is editing the creation process to this:


var Tabs = new Ext.TabPanel({
//renderTo:'tabs',
resizeTabs:true,
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true,
activeTab: 0,
width:940,
height:765,
defaults: {autoScroll:true, closable: true},
//items: [CustomersListingEditorGrid],
plugins: new Ext.ux.TabCloseMenu()
});

function addTab(addObject){
TabAdded = Tabs.add(addObject);
TabAdded.on('beforedestroy', function(tab) {
Tabs.remove(tab,false)
tab.hide();
return false;
});
addObject.show();
}

Which works, but the main issue here, is that IF the element added is a grid (it doesn't always have to be a grid) the store is not reloaded. This results in an user thinking he has updated data, but it's not updated...

rkaat
10 Sep 2010, 12:06 AM
I got a similar problem like this, does anyone has a solution for this ?

Condor
10 Sep 2010, 12:28 AM
Instead of closing the tab you should only hide the tabstip element, see (un)hideTabStripItem.

Angilo
11 Sep 2010, 1:25 AM
Thank you for your help Condor.

That is a possibility, but it still doesn't show any new results since no component will be refreshed nor reinstantiated.

Is there any way with a tab, to get new data? For example refreshing the tab will include all it's childs to refresh?

Condor
11 Sep 2010, 6:58 AM
If the tab is a formpanel you could load it with new data.

Angilo
11 Sep 2010, 7:09 AM
It the tab is a formpanel you should load it with new data.

It is unknown what the tab is. The tab can either be a grid or a form.

What is possible of course, is defining what it is.

In short:


function addTab(addObject, typeObject){
TabAdded = Tabs.add(addObject);
TabAdded.on('beforedestroy', function(tab) {
Tabs.remove(tab,false)
tab.hide();
return false;
});
addObject.show();
if (typeObject == 'form')
addObject.reload();
else if (typeObject == 'grid')
addObject.store.reload();
}

Condor
11 Sep 2010, 7:20 AM
That would work, although I would do it the other way around: give all tabs a reset method, so they can decide themselves what should be reset.

Angilo
11 Sep 2010, 8:25 AM
Thank you for your quick replies Condor. How would that look in code?

Condor
11 Sep 2010, 8:29 AM
You are adding components to the tabpanel ('addObject'). I would configure each of these components with a method that resets it.

FormPanel already has a reset method, but for a GridPanel the reset method could, e.g. do a store.removeAll().

rkaat
12 Sep 2010, 11:51 PM
I keep having problems with my pagingtoolbar not showing using the above function.
For example:
- A new tab is opened with a grid being displayed. (Everything is fine, also the pagingtoolbar is loaded correctly).
- I close the tab
- When I open a new tab which should contain the same as first, everything is loaded correctly but my pagingtoolbar doesn't show anymore. It has been loaded since I can use GetId() method from the gridpanel.getBottomToolbar().

To prevent the components from being destroyed when I close a panel I use:


function beforeDestroy(panel){
var tabpanel = Ext.getCmp('tabpanel1');
tabpanel.remove(panel, false);
panel.hide();
return false;
}


Does the above function not work for a PagingToolbar ? Is there a way to fix this ?

Condor
13 Sep 2010, 12:01 AM
Did you check with Firebug if the toolbar is still there (I assume it is, but at a wrong location)?

rkaat
13 Sep 2010, 12:13 AM
The toolbar still exists, since I can access it by: grid.getBottomToolbar.getId();. It does spit out the right id. At the new panel when the toolbar doesn't show anymore, it still creates the div: x-panel-bbar.

Would I need to reinstantiate it when I open a new tab and add it to the gridpanel like:


function openNewTab(){
var toolbar = new Ext.PagingToolbar(Ext.getCmp('toolbarid'));
var grid = new Ext.grid.GridPanel(Ext.getCmp('gridid'));

grid.add(toolbar);
// Something like this
}

Condor
13 Sep 2010, 12:41 AM
New panel? I thought you were reusing existing panels?

ps. You can't use grid.add() (grid is technically a container, but it doesn't behave like one).

rkaat
13 Sep 2010, 1:43 AM
Hmm, I thought I was reusing my panels but my firebug tells me another story. I got 1 tab which ain't closable.
- When I double click on a cell in a grid a new tab opens (new <div> appears in my firebug as expected).
- Now I close the tab (<div> Turns grey as expected since I am not destroying it).
- I click the exact same cell as first, so the new tab should show the same (A new <div> appears and the other 2 turn grey).


Just found out a bit more:
When I open a new tab with a grid all is fine like first. This time I don't close the panel (so nothing gets destroyed). When I go back to tab1 and re-open the same tab, the pagingtoolbar also is gone.

I also removed my destroy function since I am re-instantiating the grid each time I open a new tab.