tabs - extjs 4 相同组件多个选项卡

Question

我正在使用 extjs 4 和 rails 3。我有工具栏和选项卡面板。我想在所有选项卡面板中使用相同的工具栏，并希望工具栏上的按钮根据事件的选项卡工作。例如。工具栏包含添加、编辑等按钮。假设我有区域和类别选项卡。当区域选项卡处于事件状态时，我应该能够为“区域”等执行“添加”操作。在 extjs 4 中实现这一目标的正确方法是什么？我无法在区域和类别 Controller 的工具栏上分配操作？
我提到了 this但不知道如何在我的代码中实现它？
这是我尝试过的“区域”extjs mvc Controller 的示例代码。问题是如果我在 中编写类似的代码分类 通用工具栏的 ADD btn Controller ， 的 ADD 实现地区 被调用:(

    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

希望下面的代码能帮到你:

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

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

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

1.打开上面的链接后，您可以在右下角找到结果。
2.根据您的问题，创建了一个工具栏，它在具有相同按钮的两个选项卡中使用。
3.如果您单击按钮，它将获取当前选项卡ID，并根据激活的选项卡显示不同的结果。