ext js 从另一个控制器调用控制器中的方法

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，但我不确定。