PDA

View Full Version : setActiveTab doesn't set the active tab when there's no existing tab



jlawton
17 Dec 2012, 1:11 PM
I am working on a project where I have a tab panel with no tabs, and then a button or two that when clicked create a tab in the tabpanel. The problem is that I also need to track when the tabs change, and when there are no tabs in the panel, and then a tab is added, there is no way to set it to actually be active via 'setActiveTab'. The only time it becomes truely Active is when the tab is clicked on. You can tell because the styling on the tab changes.

You can see the code example here in this jsfiddle (http://jsfiddle.net/vbPKg/). It is also pasted below.

To recreate the problem, load a page with the sample code (i use chrome) and bring up the console. Click on 'add tab 1'. A new tab is added, but not actually active. They way you can tell is to click on 'add tab 2' the console will log that the 'tabchange' event was fired, but that the 'oldcard' parameter was null. Now if you click on the 'add tab 1' button again, or just click on the 'tab 1' tab, you will see that it is not null anymore, it is the object of tab 2.

The other way to see the problem is to now refresh the page, and click on the 'add tab 1' button again. Now click on the 'tab 1' tab, you will see the styling on it change very slightly. Also, the tabchange event gets fired and the oldcard parameter is null (which is appropriate in this case). Now if you click the 'add tab 2' button the second tab will be added, and the tabchange event will fire, and the oldcard object will not be null, it will be populated with the tab 1 object.

Any suggestions for fixing this? I know I can add a hidden tab or something so there's always a tab in the tabpanel, but I thought this could be an issue for other people out there.

Thanks in advance!



Ext.application({
name : 'MyApp',

launch: function() {
var tabs = new Ext.panel.Panel({
margins: '5 5 5 0'
,renderTo: Ext.getBody()
,dockedItems: [
{
xtype: 'toolbar'
,dock: 'top'
,items: [
{
xtype: 'button'
,text: 'add tab 1'
,number: '1'
,listeners: {
click: function() {
var tabPanel = Ext.ComponentQuery.query('tabpanel')[0];
var activeTab = tabPanel.down('[uid=tab1]');
if (activeTab) {
tabPanel.getLayout().setActiveItem(0);
} else {
var panel = Ext.create('Ext.panel.Panel', {
xtype: 'panel'
,title: 'tab 1'
,uid: 'tab1'
,html: 'this is the content for tab 1'
});
tabPanel.add(panel);
tabPanel.doLayout();
tabPanel.getLayout().setActiveItem(0);
}
}
}
}
,{
xtype: 'button'
,text: 'add tab 2'
,number: '2'
,listeners: {
click: function() {
var tabPanel = Ext.ComponentQuery.query('tabpanel')[0];
var activeTab = tabPanel.down('[uid=tab2]');
if (activeTab) {
tabPanel.getLayout().setActiveItem(1);
} else {
var panel = Ext.create('Ext.panel.Panel', {
xtype: 'panel'
,title: 'tab 2'
,uid: 'tab2'
,html: 'this is the content for tab 2'
});
tabPanel.add(panel);
tabPanel.doLayout();
tabPanel.getLayout().setActiveItem(1);
}
}
}
}
]
}
]
,items: [
{
xtype: 'tabpanel'
,id: 'tabPanel'
,title: 'Tabs'
,listeners: {
tabchange: function(tabPanel, newCard, oldCard, eOpts) {
console.log('tabchange');
console.log('tabPanel = ' + tabPanel);
console.log('newCard = ' + newCard);
console.log('oldCard = ' + oldCard);
console.log('eOpts = ' + eOpts);
}
}
}
]
});
}
});?

slemmon
17 Dec 2012, 1:17 PM
replace


tabPanel.add(panel);
tabPanel.doLayout();
tabPanel.getLayout().setActiveItem(0);


with


tabPanel.setActiveTab(tabPanel.add(panel));

jlawton
17 Dec 2012, 1:19 PM
THANK YOU!