fyi, this is my first Ext JS project and using ExtJS6 I created a main border layout and each view has its own controller.
From the west view controller, how do I call a method in the center controller.
Should I provide more info?
The concept is, one the west border I have a bobox. When the user selects a bobox it loads some stores with data. Now using those stores, I want to call some custom functions I build in the CENTER view controller. The reason they are built in the CENTER view controller is because they affect the grids that are sitting in the CENTER VIEW.
Here is my 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'
}]
});
Here is my WEST region controller, I want to fire event on bobox selection after two different stores are loaded.
Ext.define('ExtApplication1.view.mainmenulist.mainmenulistController', {
extend: 'Ext.app.ViewController',
alias: 'controller.mainmenulist-mainmenulist',
onComboboxSelect: function (bo, 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();
}
});
}
});
}
});
here is my controller for 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);
},
fyi, this is my first Ext JS project and using ExtJS6 I created a main border layout and each view has its own controller.
From the west view controller, how do I call a method in the center controller.
Should I provide more info?
The concept is, one the west border I have a bobox. When the user selects a bobox it loads some stores with data. Now using those stores, I want to call some custom functions I build in the CENTER view controller. The reason they are built in the CENTER view controller is because they affect the grids that are sitting in the CENTER VIEW.
Here is my 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'
}]
});
Here is my WEST region controller, I want to fire event on bobox selection after two different stores are loaded.
Ext.define('ExtApplication1.view.mainmenulist.mainmenulistController', {
extend: 'Ext.app.ViewController',
alias: 'controller.mainmenulist-mainmenulist',
onComboboxSelect: function (bo, 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();
}
});
}
});
}
});
here is my controller for 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);
},
2 Answers
Reset to default 4In ExtJS6 you don't have to use the init function to add the listeners:
First Controller
Ext.define('AwesomeController', {
extend: 'Ext.app.ViewController',
alias: 'controller.awesome',
listen: {
controller: {
'amazing': {
amazingEvent: 'onAmazingEvent'
}
}
},
onAmazingEvent: function(controller, arg1, arg2) {
// ..
}
});
Second Controller
Ext.define('AmazingController', {
extend: 'Ext.app.ViewController',
alias: 'controller.amazing',
fooBar: function() {
// ..
this.fireEvent('amazingEvent', this, arg1, arg2);
}
});
Its remended to add the event source to the event. For further information on events read here: https://docs.sencha./extjs/6.0/core_concepts/events.html
One approach to doing this is to create a controller event. Emit this event from one controller, and listen for it in another controller. This creates looser coupling than directly calling methods on controllers.
For example:
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);
}
});
You can do this in ExtJS 4+ I believe. There might be a better way to do it now with version 6, but I'm not sure.