javascript - ol-ext Controller 中的控制栏和功能

Question

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