ol-ext Control Bar and function in the Controller

Question

I have an extjs app in which I am using an ol-ext control bar. The control bar is in the file MyApp.js and the function that I want to call clicking on the button belonging the control bar is in the relative controller MyAppController. In MyApp.js:

var testFuction = function(){
   return this.getController().updateImages;
};

var mainbar = new ol.control.Bar();
var first = new ol.control.Button (
 {
       html: '1',
       //handler: 'updateImages',
       //reference: 'locationShowImageButton',
        handleClick: testFuction,
 });
       
//Standard Controls
mainbar.addControl (first);
mainbar.setPosition('bottom-right');
this.map.addControl(mainbar);

In MyAppController:

updateImages: function (obj) {
            var self = this;
            this.getView().cleanImageLayers();
            var selectedFloors = ; //it should be the value of the  ol.control.Button, so 1
            if (this.lookupReference('locationShowImageButton').pressed) {
               .....

Answer 1

First check if this.getController() in MyApp.js refer to MyAppController.

You can't use ol.control.Button like sencha component.

You should use this in your MyApp.js scope.

var mainbar = new ol.control.Bar();
var me = this;
var first = new ol.control.Button (
 {
        html: '1',
        handleClick: function () {
            me.getController().updateImages();
        }
 });

//Standard Controls
mainbar.addControl (first);
mainbar.setPosition('bottom-right');
this.map.addControl(mainbar);