When I want to react to the user selecting a row on a grid, I use this:
var grid = new Ext.grid.GridPanel({
region: 'center',
...
});
grid.getSelectionModel().on('rowselect', function(sm, index, rec){
changeMenuItemInfoArea(menuItemApplication, 'you are on row with index ' + index)
});
how can I attach the same functionality to tabs? something like this:
var modules_info_panel = new Ext.TabPanel({
activeTab: 0,
region: 'center',
defaults:{autoScroll:true},
listeners: {
'tabclick': function(tabpanel, index) {
changeMenuItemInfoArea(menuItemModules,'you clicked the tab with index ' + index);
}
},
items:[{
title: 'Section 1',
html: 'test'
},{
title: 'Section 2',
html: 'test'
},{
title: 'Section 3',
html: 'test'
}]
});
modules_info_panel.getSelectionModel().on('tabselect', function(sm, index, rec){
changeMenuItemInfoArea(menuItemModules, 'you are on tab with index ' + index)
});
Addendum
Thanks @timdev, that works, and here is how I identify which tab it is (simply via id
, I couldn't get the tab's index as I could the row's index in grid):
var modules_info_panel = new Ext.TabPanel({
activeTab: 0,
region: 'center',
defaults:{autoScroll:true},
items:[{
id: 'section1',
title: 'Section 1',
html: 'test'
},{
id: 'section2',
title: 'Section 2',
html: 'test'
},{
id: 'section3',
title: 'Section 3',
html: 'test'
}]
});
modules_info_panel.items.each(function(tab){
tab.on('activate',function(panel){
changeMenuItemInfoArea(menuItemModules, 'you opened the "' + panel.id + '" tab');
});
});
replaceComponentContent(regionContent, modules_info_panel);
hideComponent(regionHelp);