Javascript 如何控制extjs应用程序控制器中事件侦听器的范围

ExtJS-v6.2.1

我对重用在ExtJs中开发的主要组件感兴趣，我在tabpanel的不同选项卡中编写了该组件。主组件由两个子组件组成，每个子组件都有各自的控制器，子组件之间相互作用。由于事件侦听器是在控制器域中添加的，因此在选项卡的一个实例中激发的事件也会影响其他选项卡

解释了场景的伪代码

*********** Views ***********

Ext.define('MainApp.view.main.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'mainapp-main',  
    controller: 'main',

    ...

    items: [{
        title: 'Main Component Instance 1',
        closable: true,
        items: [{
            xtype: 'mainapp-maincomponent'
        }]
    }, {
        title: 'Main Component Instance 2',
        closable: true,
        items: [{
            xtype: 'mainapp-maincomponent'
        }]
    }]
});


Ext.define('MainApp.view.maincomponent.MainComponent', {
    extend: 'Ext.panel.Panel',
    xtype: 'mainapp-maincomponent',
    controller: 'maincomponent',

    ...

    items: [{ 
            xtype: 'mainapp-component1'
        },{
            xtype: 'mainapp-component2'
    }]
});

Ext.define('MainApp.view.component1.Component1', {
    extend: 'Ext.panel.Panel',
    xtype: 'mainapp-component1',    
    controller: 'component1',

    ...

    items: [{
        xtype: 'button',
        cls: 'contactBtn',
        scale: 'large',
        text: 'Fire Event',
        handler: 'onComponentButtonTapped'
    }]
});

Ext.define('MainApp.view.component2.Component2', {
    extend: 'Ext.panel.Panel',
    xtype: 'mainapp-component2',    
    controller: 'component2',

    ...

    items: [{
        xtype: 'textfield',
        value: 'Button is not clicked yet',
        width: 500,
        readOnly: true
    }]
});

*********** Controllers ***********

Ext.define('MainApp.view.component1.Component1Controller', {
    extend: 'Ext.app.ViewController',

    alias: 'controller.component1',

    onComponentButtonTapped: function (btn, eventArgs) {
        this.fireEvent('component1ButtonTapped', btn, eventArgs);
    }
});

Ext.define('MainApp.view.component2.Component2Controller', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.component2',
    listen: {
        controller: {
            'component1': {
                component1ButtonTapped: 'onComponent1ButtonTapped'
            }
        }
    },

    onComponent1ButtonTapped: function(){
        this.getView().down('textfield').setValue(Ext.String.format('Button tapped at {0}', Ext.Date.format(new Date(), 'Y-m-d H:i:s')));
    }
});

有人能提出正确的解决方法吗

更多详细信息

选项卡面板将加载到视口中

Tab 1 has first instance of Main Component  - M1
Tab 2 has second instance of Main Component - M2

主组件的每个实例都有两个子组件

Component1 - M1C1 > M1C1 View and M1C1 Controller
Component2 - M1C2 > M1C2 View and M1C2 Controller

对于主组件的第二个实例也是如此

Component1 - M2C1 > M2C1 View and M2C1 Controller
Component2 - M2C2 > M2C2 View and M2C2 Controller

这里的要求是限制在M1C1视图上执行的操作只能由M1C2控制器处理

Issue is that with the code above M2C2 Controller also listens to the event

---

将处理程序“onComponentButtonTapped”更改为

{
    xtype: 'button',
    cls: 'contactBtn',
    scale: 'large',
    text: 'Fire Event',
    listeners: {
        click: 'onComponentButtonTapped',
        scope: SCOPE-YOU-WANT
    }
}

---

首先，我认为您在

MainApp.view.main.main

组件中进行了过度嵌套，并且您也没有使用布局进行过度嵌套。这可能会导致不必要的后果，如额外的布局运行和膨胀的DOM影响性能

好的，回答你的问题！我不认为范围是你真正想要的。我将其视为如何正确构建ViewController。虽然理解这不是您真正的代码，但我要说的是，在本例中，您不需要

Component1Controller

controller。去掉它，按钮的处理程序将被解析为

main组件

控制器，您可以在该控制器中控制两个子项。我这样说完全是因为知道您的

组件1控制器

可能正在做其他事情，所以不能说并非所有容器都需要控制器。如果

Component1Controller

不动，它也可以满足我在这种情况下的需要。我不会在

Component1Controller

实例上触发事件并使用事件域访问

Component2Controller

，而是在

Component1

上触发一个视图事件，并在您的配置对象上添加一个侦听器，以便

maincomponent

控制器获取事件来执行它的任务

---

这听起来很混乱，很难理解，所以我创建了这个。

谢谢您的时间，按照您建议的方法并不能解决我的问题。我不确定我的问题是否足够清楚。我已经用更多的细节更新了这个问题。