ol-ext Control Bar 和 Controller 中的功能

Question

我有一个 extjs 应用程序，我在其中使用了 ol-ext 控制栏。控制栏在文件 MyApp.js 中，我想调用属于控制栏的按钮的函数在相关控制器 MyAppController。 在 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);

在 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

首先检查MyApp.js中的this.getController()是否引用了MyAppController。

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

您应该在 MyApp.js 范围内使用 this。

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