Question

fyi，这是我的第一个Ext JS项目并使用ExtJS6 我创建了一个主边框布局，每个视图都有自己的控制器。

从西视图控制器，如何调用中央控制器中的方法。

我应该提供更多信息吗？

这个概念是，西边界有一个组合框。当用户选择组合框时，它会为一些商店加载数据。现在使用这些商店，我想调用我在CENTER视图控制器中构建的一些自定义函数。它们在CENTER视图控制器中构建的原因是它们会影响位于CENTER VIEW中的网格。

这是我的Main.js

Ext.define('ExtApplication1.view.main.Main', {
extend: 'Ext.container.Container',
xtype: 'app-main',

controller: 'main',

viewModel: {
    type: 'main'
},

plugins: 'viewport',   

requires: [
    'ExtApplication1.view.main.Header',
    'ExtApplication1.view.main.Footer',
    'ExtApplication1.view.main.Panel',
    'ExtApplication1.view.main.MainController',
    'ExtApplication1.view.main.MainModel',

    'ExtApplication1.view.mainmenulist.mainmenulist',
    'ExtApplication1.view.clientdetails.clientdetails'
],

layout: {
    type: 'border'
},

items: [{
    region: 'center',
    xtype: 'clientdetails', //should be maintable
    title: 'Main Details Panel',
    flex: 1
}, {
    xtype: 'appheader',
    region: 'north'
}, {
    xtype: 'appfooter',
    region: 'south'
}, {
    region: 'west',
    split: true,
    collapsible: true,
    title: 'Main Menu',
    //flex: 2,

    xtype: 'mainmenulist' // 'mainmenuv4view' 'mainmenuv3view'

}]

}）;

这是我的WEST区域控制器，我想在加载两个不同的商店后在组合框选择上触发事件。

Ext.define('ExtApplication1.view.mainmenulist.mainmenulistController', {
extend: 'Ext.app.ViewController',
alias: 'controller.mainmenulist-mainmenulist',

onComboboxSelect: function (combo, record, eOpts) {

    //load position store
    //load market store
    //calculate

    var selectedCID = record.get('ClientID');
    var targetGrid = Ext.getCmp('positionsGridID');
    var targetStore = targetGrid.getStore();

    //load positions store
    targetStore.load({
        params: {
            user: 'xxx',
            pw: 'xxx',
            cid: selectedCID
        },
        //load market data
        callback: function (records, operation, success) {
            var targetGrid2 = Ext.getCmp('marketsGridID');
            var targetStore2 = targetGrid2.getStore();
            targetStore2.load({
                params: {
                    user: 'stephen',
                    pw: 'forero',
                    cid: selectedCID
                },
                callback: function (records, operation, success) {
                    //Ext.Msg.alert('Status', 'Changes saved successfully.');

                    this.fireEvent('doSomething', 'arg1', 'arg2');
                    //ExtApplication1.app.getController('view.clientdetails.clientdetailsController').onClickCalculate();
                }
            });
        }
    });



}

}）;

这是我的CENTER区域控制器

Ext.define('ExtApplication1.view.clientdetails.clientdetailsController', {
extend: 'Ext.app.ViewController',
alias: 'controller.clientdetails-clientdetails',

init: function() {
    this.listen({
        controller: {
            '*': { // This selector matches any originating Controller
                doSomething: 'doSomething'
            }
        },
    })
},

doSomething: function (param1, param2) {
    Ext.Msg.alert('Status', 'Changes saved successfully.');
    //alert("Param1: " + param1 + "  Param2: " + param2);
},

Answer 1

在ExtJS6中，您不必使用init函数来添加侦听器：

第一控制器

Ext.define('AwesomeController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.awesome',

    listen: {
        controller: {
            'amazing': {
                amazingEvent: 'onAmazingEvent'
            }
        }
    },

    onAmazingEvent: function(controller, arg1, arg2) {
        // ..
    }
});

第二控制器

Ext.define('AmazingController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.amazing',

    fooBar: function() {
        // ..
        this.fireEvent('amazingEvent', this, arg1, arg2);
    }
});

建议将事件源添加到事件中。有关事件的更多信息，请参阅此处：https://docs.sencha.com/extjs/6.0/core_concepts/events.html

Answer 2

执行此操作的一种方法是创建控制器事件。从一个控制器发出此事件，并在另一个控制器中侦听它。这比在控制器上直接调用方法创建了更松散的耦合。

例如：

Ext.define('app.controller.ControllerA', {
    someMethod: function(){
        this.fireEvent('doSomething', 'arg1', 'arg2');
    }
});

Ext.define('app.controller.ControllerB', {
    init: function() {
        this.listen({
            controller: {
                '*': { // This selector matches any originating Controller
                    doSomething: 'doSomething'
                }
            },
        })
    },
    doSomething: function(param1, param2){
        alert("Param1: " + param1 + "  Param2: " + param2);
    }
});

你可以在ExtJS 4+中做到这一点我相信。现在使用版本6可能有更好的方法，但我不确定。

来自另一个控制器

2 个答案: