Как контролировать область прослушивания событий в контроллере приложения extjs - PullRequest
Новая
       8

Как контролировать область прослушивания событий в контроллере приложения extjs

0 голосов
/ 11 июня 2018

Ext JS - v 6.2.1

Я заинтересован в повторном использовании основного компонента, разработанного в ExtJ, который я написал на разных вкладках панели вкладок.Основной компонент состоит из двух дочерних компонентов, и каждый из этих компонентов имеет свои соответствующие контроллеры, а дочерние компоненты взаимодействуют между собой.Поскольку прослушиватели событий добавляются в домен контроллера, события, запущенные в одном экземпляре вкладки, влияют и на другие вкладки.

Псевдокод объясненного сценария 

*********** 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

Ответы [ 2 ]

0 голосов
/ 22 июня 2018

Во-первых, я полагаю, что вы переусердствовали в своем MainApp.view.main.Main компоненте, и вы также не используете макет для перерасхода.Это может привести к ненужным последствиям, таким как дополнительные макеты и раздутый DOM, влияющие на производительность.

Хорошо, на ваш вопрос!Я не думаю, что сфера - это то, что вы на самом деле здесь.Я вижу это как правильно спроектировать ваши ViewControllers.Понимая, что это не ваш настоящий код, я скажу, что в этом примере вам не нужен этот Component1Controller контроллер.Избавьтесь от этого, и обработчик кнопки будет обработан до контроллера maincomponent, где вы можете управлять обоими дочерними элементами.Я говорю это полностью, зная, что ваш Component1Controller, вероятно, делает другие вещи, поэтому он никуда не денется, просто чтобы сказать, что не всем контейнерам нужны контроллеры.Это также служит тому, что я сделал бы в этом случае, если бы Component1Controller остался.Вместо того, чтобы вызывать событие для экземпляра Component1Controller и использовать домен событий, чтобы добраться до Component2Controller, я бы запустил событие просмотра на Component1 и добавил слушатель для вашего объекта конфигурации, чтобы контроллер maincomponent получил событиечтобы сделать это.

Это звучит грязно и трудно следовать, поэтому я создал эту скрипку .

0 голосов
/ 11 июня 2018

Изменить handler: 'onComponentButtonTapped' на 

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