extjs 4 same component multiple tabs

Question

i m working with extjs 4 & rails 3. i am having toolbar & tab panel. i want to use same toolbar in all the tab panel & want buttons on the toolbar to work according to tab that is active. For eg. toolbar contains add,edit,etc buttons. Suppose i have region & category tabs. When region tab is active i should be able to perform "ADD" operation for "Region" & so on. What can be the correct way to achieve this in extjs 4 ? I am not able to assign action on toolbar in Region & Category controllers? i referred thisbut no idea as to how can i implement it in my code ? Here is sample code of "Regions" extjs mvc controller that i have tried. The problem is if i write similar code in Category contoller for ADD btn of commontoolbar, ADD implementation of Region gets called :(

    Ext.define('overdrive.controller.Regions', {
        extend: 'Ext.app.Controller',
        views: [
            'region.RegionList',
            'region.RegionForm',
            'region.RegionPanel',
            'common.CommonToolbar'
        ],
        models: ['Region'],
        stores: ['Regions'],
         init: function() {
            this.control({
                'viewport > panel': {
                    render: this.onPanelRendered
                },
                'regionpanel':{
                    beforerender:this.addToolbar
                } ,
                'commontoolbar button[action=chk]': {
                    click: this.chk
                }

            });
        },
        chk:function()
        {

            var tabcon = Ext.getCmp('tabcon');//tabcon is id of tab panel
             var activetab = tabcon.getActiveTab();

             var activetabid = activetab.getId();
             console.log('Active Tab ID:'+activetabid);
                if(activetabid == 'regiontab'){
                alert('Clicked button in region Tab');
                }else if(activetabid == 'storetab'){
                 alert('Clicked button in store Tab');
                }
        },


       addToolbar:function()
       {

            var regionpanel=Ext.widget('regionpanel');
            var regiontab=Ext.getCmp('regiontab');
            var tabcon = Ext.getCmp('tabcon');


           regiontab.add({
                xtype:'commontoolbar', id:'regiontoolbar',
                itemId: 'regiontoolbar'
           });

        },

       addRegion: function(button) {

            var regiontoolbar=button.up('regiontoolbar');
            var regiontab = Ext.getCmp('regiontab');
            var regionpanel = regiontab.down('regionpanel');
            var regionform = regionpanel.down('regionform');
            regiontoolbar.child('#add').setDisabled(true);
            regiontoolbar.child('#edit').setDisabled(true);
            regiontoolbar.child('#delete').setDisabled(true);
            regiontoolbar.child('#save').setDisabled(false);
            regiontoolbar.child('#cancel').setDisabled(false);
            regionpanel.layout.setActiveItem(regionform);
        }
});

Answer 1

If you are strict to use only one class,may be the below code also helpful for you shruti:

Ext.define('Sample', {    
    alternateClassName: ['Example', 'Important'],     
    code: function(msg) {        
        alert('Sample for alternateClassName... ' + msg);     
    },
    renderTo :document.body
});
var hi = Ext.create('Sample');
hi.code('Sample');
var hello = Ext.create('Example');
hello.code('Example');
var imp = Ext.create('Important');
imp.code('Important');

Working sample:

http://jsfiddle.net/kesamkiran/kVbra/30/