extjs 4相同的组件多个选项卡

Question

我正在使用extjs 4和rails 3.我有工具栏和标签面板.我想在所有选项卡面板中使用相同的工具栏,并希望工具栏上的按钮按照活动的选项卡工作.例如.工具栏包含添加,编辑等按钮.假设我有区域和类别标签.当区域选项卡处于活动状态时,我应该能够对"区域"等执行"添加"操作.在extjs 4中实现这一目标的正确方法是什么？我无法在Region&Category控制器的工具栏上分配操作？我提到了这个,但不知道如何在我的代码中实现它？这是我尝试过的"Regions"extjs mvc控制器的示例代码.问题是,如果我在类别控制器中为commontoolbar的ADD btn 编写类似的代码,则调用Region的 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，并根据激活的选项卡显示不同的结果。