javascript - ext js从另一个 Controller 调用 Controller 中的方法

Question

仅供引用，这是我的第一个 Ext JS 项目并使用 ExtJS6我创建了一个主边框布局，每个 View 都有自己的 Controller 。

从西 View Controller ，我如何调用中心 Controller 中的方法。

我应该提供更多信息吗？

这个概念是，我有一个组合框的西部边界。当用户选择一个组合框时，它会加载一些存储数据。现在使用这些商店，我想调用我在 CENTER View Controller 中构建的一些自定义函数。它们构建在 CENTER View Controller 中的原因是因为它们会影响位于 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 区域 Controller ，我想在加载两个不同的商店后在组合框选择上触发事件。

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



}

});

这是我的中心区域 Controller

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 函数来添加监听器:

第一个 Controller

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

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

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

第二 Controller

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