Tabs extjs 4同一组件多个选项卡

我正在使用ExtJS4和rails 3。我有工具栏和选项卡面板。我希望在所有选项卡面板中使用相同的工具栏&希望工具栏上的按钮根据活动的选项卡工作。例如，工具栏包含添加、编辑等按钮。假设我有区域和类别选项卡。当区域选项卡处于活动状态时，我应该能够对“区域”执行“添加”操作等等。在ExtJS4中实现这一点的正确方法是什么？我无法在区域和类别控制器的工具栏上指定操作？ 我提到但不知道如何在代码中实现它？ 下面是我尝试过的“Regions”extjs mvc控制器的示例代码。问题是，如果我在Category控件中为commontoolbar的ADD btn编写类似代码，则会调用Region的ADD实现：(

---

希望以下代码能够帮助您：

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();

您可以通过单击以下链接检查上述代码的工作示例：

1.打开上述链接后，您可以在右下角找到结果。
2.根据您的问题，将创建一个工具栏，并在两个选项卡中使用同一按钮。

---

3.如果您单击该按钮，它将获得当前选项卡id，并根据激活的选项卡显示不同的结果。

如果您严格要求只使用一个类，以下代码可能对您也有帮助：

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');

工作样本：

---

hey thnx@kiran这是一个有用的代码，但在dis u r中，在选项卡中添加了2个不同的按钮，但我希望工具栏上的“相同”按钮根据活动选项卡的不同而不同。我的意思是类似于在工具栏中添加按钮btn1和shud alert“region”在“地区”选项卡上，与国家/地区相同。@Shruti您现在可以检查。我根据您的要求更改了代码。您可以通过单击更改的工作示例来检查工作。thnx对于如此快速的答复，这是我想要的，但问题是我使用的是extjs 4 mvc模式。因此，我为国家/地区设置了单独的控制器。如何在控制上执行相同的操作ller，bcoz如果我通过别名引用工具栏，那么它不会根据活动选项卡进行操作。有没有办法在控制器中识别具有不同id的同一工具栏？thnx我尝试了你的代码，效果很好。现在有没有办法根据extjs mvc中的活动选项卡将控制重定向到特定的extjs控制器，因为我已经在c中定义了所有内容OnController？？您能与我们共享该代码吗？我们将尝试找到解决方案。：-）

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');