PDA

View Full Version : iterate through tab names in tabpanel



akraman
12 Oct 2012, 8:46 AM
hello all,
I have a tab panel where on click of a button i add tabs in tab panel dynamically and i give tab names as 'Tab tablength' , i dont want duplicate tab names to occur , but in my current code if have tab1 tab2 tab3 and i close tab2 and then click on + the tabs now are tab1 tab3 tab3 , but i dont want duplicate tab names, i want it to be tab1 tab3 tab4.in simple if i can get the logic to iterate through tab names in tab panel before creating new tab will solve my issue i guess , can anyone help me? thanks in advance.
This is my current code:


Ext.onReady(function(){ var tab = Ext.create('Ext.tab.Panel', { renderTo : Ext.getBody(), width: 300, height: 200, id: 'tabpanel', activeTab: 0, items: [{ title: 'Tab 1', bodyPadding: 10, closable: true, html : 'A simple tab', id: 'tab1' }], listeners: { render: function(tabs){ tabs.getTabBar().add({ xtype: 'button', text: '+', handler: function(){ var tab = tabs.add({ title: 'Tab'+ (tabs.items.length + 1), closable: true, html: 'New tab', listeners : { close: function () { Ext.defer(function(){ var len = tabs.items.length-1; tabs.setActiveTab(len); }, 1); } } }); tabs.setActiveTab(tab); } }); } } }); });

scottmartin
12 Oct 2012, 8:58 AM
If you assign and itemId to your new tabs, then you can use tabPanel.items.keys to get your names. or tabPanel.items.map for the object for more details.

Scott.

akraman
13 Oct 2012, 3:06 AM
Thanks Scott, but by 'tab name ' i mean 'title' that is given to each tab in tab panel, can i iterate through all title names of all tabs in tab panel ?

scottmartin
13 Oct 2012, 10:36 AM
Drill down in the tabPanel items on your debugger. You will see title. You can use items.each.



var tabPanel = Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.body,
items: [{
title: 'Foo'
}, {
title: 'Bar',
tabConfig: {
title: 'Custom Title',
tooltip: 'A button tooltip'
}
}]
});

console.log(tabPanel.items);
‚Äč

Scott.