Extjs 4 identical components with multiple tabs

Question

im works with extjs 4 and rails 3. I have a toolbar and a tab bar. I want to use the same toolbar on the tab bar and want the buttons on the tool bar to work according to the active tab. E.g. the toolbar contains buttons for adding, editing, etc. Suppose I have tabs for area and category. When the area tab is active, I should be able to perform the “ADD” operation for “Region”, etc. What could be the right way to achieve this in extjs 4? Can't I assign an action to a toolbar in the region and category controllers? I called this one but don’t know how I can implement it in my code? Here is a sample code for the extjs mvc "Regions" controller that I tried. The problem is that if I write similar code in the Category contoller for the ADD btn commontoolbar, the ADD implementation of Region is 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

We hope the following code helps you:

 btn = { id: 'button', width : 130, height : 35, text: 'Button', listeners : { click : function(){ var activetab = Ext.getCmp('extabs').getActiveTab(); var activetabid = activetab.getId(); if(activetabid == 'regiontab'){ alert('Clicked button in region Tab'); }else if(activetabid == 'countrytab'){ alert('Clicked button in country Tab'); } } } }; toolbar = Ext.create('Ext.Toolbar',{ id:'extoolbar', width : 350, height : 40 }); country = { id : 'countrytab', title : 'Country' }; region = { id : 'regiontab', title : 'Region' }; var exTabs = Ext.create('Ext.tab.Panel',{ id : 'extabs', activeTab : 0, width : 350, plain : true, style : 'background:none', items : [region,country], listeners : { beforerender : function(){ Ext.getCmp('regiontab').add(toolbar); toolbar.add(btn); }, tabchange : function(tp,newTab,currentTab){ if(newTab.getId()=='countrytab'){ toolbar.removeAll(); Ext.getCmp('countrytab').add(toolbar); toolbar.add(btn); } if(newTab.getId()=='regiontab'){ toolbar.removeAll(); Ext.getCmp('regiontab').add(toolbar); toolbar.add(btn); } } } }); exWindow = Ext.create('Ext.Window',{ id : 'examplewin', title : 'tabs sample', layout : 'fit', width : 350, height : 300, draggable : false, resizable : false, plain : true, frame : false, shadow : false, items : [exTabs] }).show(); 

You can check the working sample of the above code by clicking the following link:

http://jsfiddle.net/kVbra/23/

1.After opening the above link, you can find the result in the lower right corner.
2. According to your question, one toolbar is created, and it is used on two tabs with the same button.
3. If you click on the button, it will receive the current tab identifier, and it will display a different result, based on which tab is activated.

Answer 2

If you strictly adhere to only one class, the code below may also be useful for you:

 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 example:

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