PDA

View Full Version : Tab Panel problem opening previously closed tabs



qt4x11
18 Jan 2012, 2:33 PM
My app is modeled on the 4.0 version of the compatability examples. I've modified the layout to be able to add additional tabs to the main tab panel - when an item is selected from the nav menu, a new tab is created and set as active tab in the panel.


for example



if (navId == 'TopCustomersReport' && !this.topCustomersReportTab) {
this.topCustomersReportTab = tabs.add({
xtype : 'reports-topCustomersReport',
id : 'tab-' + navId
});
}


Ext.getCmp('app-tabpanel').setActiveTab('tab-' + navId);


This works great, I just have a small problem - my tabs are set to closable: true. So when a particular tab is closed, 'this.$name' still exists in the app and is never removed. This will prevent the user from reopening a tab that he has already opened and closed.


What is the best way to deal with this problem? Do I have to do something like bind a listener to destroy this.$name? or does the api provide an easier way to do it? Thanks for any advice.

tvanzoelen
19 Jan 2012, 3:00 AM
Is $name a variabele you defined yourself and you want to remove it after close? Then you could probably set a listener on the destroy event of the tab and do
delete this.$name

If you do not want the tab to be destroyed you can set closeAction property of the tab on 'hide'


closeAction: 'hide'

qt4x11
19 Jan 2012, 7:03 AM
Is $name a variabele you defined yourself and you want to remove it after close? Then you could probably set a listener on the destroy event of the tab and do
delete this.$name

If you do not want the tab to be destroyed you can set closeAction property of the tab on 'hide'


closeAction: 'hide'

closeAction: 'hide' seems the best way to deal with this problem - but I can't get this approach to work. I tried adding closeAction: 'hide' in several places - the definition of each individual tab in the tabpanel


Ext.define('Ext.reports.CompanyCustomerSummary', {
extend : 'Ext.Panel',
alias : 'widget.reports-companyCustomerSummary',
title : 'Customer Interaction Summary',
closable : true,
closeAction: 'hide',

layout : {
type : 'vbox',
align : 'stretch'
},
items : [{
xtype : 'reports-companyCustomerSummaryForm',
height : 100
}, {
xtype : 'reports-companyCustomerSummaryGrid',
flex : 1


}],


initComponent : function() {


this.callParent(arguments);
}


});


the declaration of the tabpanel itself in the Viewport


}
}, {
region : 'center',
xtype : 'tabpanel',
id : 'app-tabpanel',
closeAction: 'hide',
activeItem : 0,
items : [{
xtype : 'reports-dashboard',
id : 'tab-dashboard'
}],
listeners : {
'tabchange' : function(tabs, tab) {
this.syncNavigation(tab.id);
},
scope : this
}
}]


or when the tab is added to the tabpanel




if (navId == 'CompanyCustomerSummary'
&& !this.companyCustomerSummaryTab) {
this.companyCustomerSummaryTab = tabs.add({
xtype : 'reports-companyCustomerSummary',
id : 'tab-' + navId,

closeAction: 'hide'
});
}


None of these approaches work. There doesn't seem to be any errors in js console.

I've also tried setting the tabpanel itself to autoDestroy:false as per this post http://www.sencha.com/forum/showthread.php?55351-SOLVED-tabpanel-closeaction - this doesn't seem to make a difference.

I'm using extjs 4.0. Is there something else I should be trying to get this to work? Thanks!

tvanzoelen
19 Jan 2012, 7:46 AM
I don't get what this.$name is... can you explain? Probably a destroy will get the tab out of the dom, but I am not sure it will clear the reference this.$name. I think you have to set that var undefined yourself.

Can you firebug the value of this.$name after the close action? Probably it is the component unrendered (without element).

qt4x11
19 Jan 2012, 8:03 AM
I don't get what this.$name is... can you explain? Probably a destroy will get the tab out of the dom, but I am not sure it will clear the reference this.$name. I think you have to set that var undefined yourself.

Can you firebug the value of this.$name after the close action? Probably it is the component unrendered (without element).

Sorry $.name is my terminology - and I made the description of my problem even more unclear. What I meant by $.name was, something like this.companyCustomerSummaryTab in code such as




if (navId == 'CompanyCustomerSummary' && !this.companyCustomerSummaryTab) { this.companyCustomerSummaryTab = tabs.add({ xtype : 'reports-companyCustomerSummary', id : 'tab-' + navId,closeAction: 'hide' }); }

basically a reference to a child tab in the tab panel, a dom object that is created the first time the tab is created.

tvanzoelen
19 Jan 2012, 8:07 AM
Can you confirm that it ($name) is not empty after the close action. Probably it is the component but then unrendered with no element.

If so, then or you delete the reference after close



delete this.$name


or change your if condition



if (navId == 'CompanyCustomerSummary' && !this.companyCustomerSummaryTab
&& !this.companyCustomerSummaryTab.rendered){

}


In the last case you have to remove the closeActions again. But anyway... close is not clearing that this.companyCustomerSummaryTab condition. Then it wont reopen the tab again after close, is that correct?

qt4x11
19 Jan 2012, 8:30 AM
Can you confirm that it ($name) is not empty after the close action. Probably it is the component but then unrendered with no element.


Yes this is the case, this.companyCustomerSummaryTab is not empty after the tab is added to the panel, and then closed. Thanks, I'm working on your proposed solutions...

qt4x11
19 Jan 2012, 8:41 AM
Thank you for all your help.

I decided to use this approach, even though it is not as elegant as autoDestroy: false, closeAction: 'hide' - it seems more robust


if (navId == 'CompanyCustomerSummary' && this.companyCustomerSummaryTab) {
if (!this.companyCustomerSummaryTab.rendered) {
delete this.companyCustomerSummaryTab;
}
}
if (navId == 'CompanyCustomerSummary'
&& !this.companyCustomerSummaryTab) {
this.companyCustomerSummaryTab = tabs.add({
xtype : 'reports-companyCustomerSummary',
id : 'tab-' + navId
});
}

tvanzoelen
19 Jan 2012, 9:00 AM
If you delete the reference also delete the component from the dom.... with destroy. Or load it once on close set it hidden and switch to visible if the user reopens the tab.

Deleting the reference and keep stuff in the dom gives troubles

qt4x11
19 Jan 2012, 9:11 AM
If you delete the reference also delete the component from the dom.... with destroy. Or load it once on close set it hidden and switch to visible if the user reopens the tab.

Deleting the reference and keep stuff in the dom gives troubles

ok - is this the correct way to remove the component from the dom?

if (navId == 'CompanyCustomerSummary' && this.companyCustomerSummaryTab) {
if (!this.companyCustomerSummaryTab.rendered) {
delete this.companyCustomerSummaryTab;
tabs.remove("tab-CompanyCustomerSummary");
}
}

tvanzoelen
20 Jan 2012, 12:52 AM
First dom removal then delete the reference



tabs.remove("tab-CompanyCustomerSummary");
delete this.companyCustomerSummaryTab;


But why not create it once and set it hidden en visible again afterward with the close button and menu?