ext js Call-Methode in der Steuerung von einem anderen Controller

Question

fyi, das ist meine erste Ext JS-Projekt und mit ExtJS6 Ich erstellte eine Haupt-Rahmen-Layout und jede Ansicht hat einen eigenen Controller.

Vom West View Controller, wie rufe ich eine Methode in der Center-Controller.

Sollte ich weitere Informationen zur Verfügung stellen?

Das Konzept ist, an der Westgrenze habe ich eine Combobox. Wenn der Benutzer eine Combobox auswählt, lädt er einige Geschäfte mit Daten. Mit diesen Speichern möchte ich einige benutzerdefinierte Funktionen aufrufen, die ich in der CENTER-Ansichtssteuerung erstellt habe. Der Grund dafür, dass sie in der CENTER-Ansichtssteuerung erstellt wurden, liegt darin, dass sie sich auf die Raster auswirken, die sich in der MITTEANSICHT befinden.

Hier ist meine 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' 

}] 

});

Hier ist meine WEST-Region-Controller, ich möchte Ereignis auf Combobox-Auswahl auslösen, nachdem zwei verschiedene Geschäfte geladen sind.

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



} 

});

hier ist mein Controller für CENTER Region

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

Ein Ansatz, dies zu tun, ist ein Controller-Event zu erstellen. Senden Sie dieses Ereignis von einem Controller und hören Sie es in einem anderen Controller ab. Dies erzeugt eine lockere Kopplung als direkte Methoden auf Controllern aufzurufen.

Zum Beispiel:

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

du in ExtJS tun können 4+ glaube ich. Es könnte einen besseren Weg geben, es jetzt mit Version 6 zu tun, aber ich bin mir nicht sicher.

Answer 2

In ExtJS6 Sie müssen nicht die init-Funktion verwenden, um die Zuhörer hinzuzufügen:

erste Controller

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

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

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

zweiten Controller

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

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

Seine empfohlen, um die Ereignisquelle hinzufügen zu dem Ereignis. Weitere Informationen zu Ereignissen finden Sie hier: https://docs.sencha.com/extjs/6.0/core_concepts/events.html