get active tab on button click in extjs - extjs

Question

I just want to get active tab on 'save' button click in extjs code.
my code is given below:
Ext.require([
'Ext.tab.*',
'Ext.window.*',
'Ext.tip.*',
'Ext.layout.container.Border'
]);
Ext.define('WebCare.UI.RoleManagerAdminWindow', {
extend: 'Ext.window.Window',
id: 'rolemanageradminwindow',
modal: true,
title: 'Manage Role & Permission',
closable: true,
closeAction: 'hide',
width: 600,
height: 550,
minWidth: 700,
minHeight: 200,
layout: 'border',
bodyStyle: 'padding: 5px;',
listeners: {
show: function (sender, eOpts) {
var self = sender;
vent.trigger("WindowLoad");
}
},
items: [
{
id: 'rolemanageradmintab',
region: 'center',
xtype: 'tabpanel',
constructor: function (config) {
var self = this;
self.callParent(config);
},
items: [
{
xtype: 'rolemanagereditor',
id:'1'
},
{
xtype: 'agencyeditor',
id: '2'
}
],
listeners: {
'tabchange': function (tabPanel, tab) {
}
}
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
defaults: { minWidth: 70 },
style: {
background: "#d6e3f3"//, "#d9ebff",
},
height: 40,
items: [
{ xtype: 'component', flex: 1 },
Ext.create('Ext.button.Button', {
height: 25,
text: 'Close',
disabled: false,
handler: function () {
this.up('.window').close();
}
}),
Ext.create('Ext.button.Button', {
height: 25,
text: 'Save',
disabled: false,
handler: function () {
}
})
]
}
]
});

Answer 1

A simple example to get the active tab in the tabpanel when you click Save button.
Ext.onReady(function() {
var tabPanel = Ext.create('Ext.tab.Panel', {
width: 300,
height: 200,
activeTab: 0,
items: [
{
title: 'Tab 1',
bodyPadding: 10,
html: 'A simple tab'
},
{
title: 'Tab 2',
html: 'Another one'
},
{
title: 'Tab 3',
html: 'Another one'
}
],
buttons: [
{
text: 'Save',
handler: function() {
var activeTab = tabPanel.getActiveTab();
alert("The active tab in the panel is " + activeTab.title);
}
}
],
renderTo: Ext.getBody()
});
});