带有 OpenLayers 代码的 ExtJS4 工具栏

Question

我们在我们的应用程序中使用带有 ExtJS3.2 的 Mapfish 工具栏。现在我们正在尝试将 ExtJS3.2 升级到 ExtJS4。但是 mapfish 不能使用 ExtJS4。因此，我们使用的是 ExtJS4 工具栏，但是为工具栏中的按钮编写的 openlayers 代码没有执行。

ExtJS4 代码为：

var extoolbar = Ext.create('Ext.toolbar.Toolbar',{
    border : true,
    width : 100,
    height : 40,
    layout : hbox
});

var btn1 = {
    xtype : 'button',
    enableToggle : true,
    tooltip : "Zoom In",
    id : 'zoominbtn',
    listeners : {
        'click' : fucntion(){
            new OpenLayers.Control.ZoomBox({
                alwaysZoom : true,
                draw : function(){
                    this.handler = new OpenLayers.Handler.Box(
                        this, {done: this.zoomBox}, {keyMask: this.keyMask});
                }
            });
        }
    }
};
extoolbar.add(btn1);

如果我们点击放大按钮控件将进入OpenLayers.Control.ZoomBox，但draw 方法没有执行。我的问题是：

1. 代码有问题吗？
2. 还有其他方法可以使用 ExtJS4 处理 OpenLayers 吗？

Answer 1

我也在使用带有 Ext 3.4 的 MapFish。

首先你有一个fucntion() 而不是function() :)

那么，可能我不明白你想做什么，但我认为-IMAO-这不是使用ZoomBox控件的好方法... 您应该在创建时将 ZoomBox 控件添加到地图并为控件提供一个 ID，然后使用监听器来监听切换事件，如下所示：

listeners: {
    'toggle': function(button, pressed) {
        var ctrl = map.getControl('yourid');
        if(pressed){
            // Activate the control
            ctrl.activate();
        } else {
            // Deactivate the control
            ctrl.deactivate();
        }
    }
}

这样，当您按下按钮时，您将启用控件，当您再次按下按钮时，您将禁用它。 请记住，ZoomBox 控件一旦处于活动状态，也可以通过按住 shift 来始终可用

或者你也可以使用GeoExt，真的很简单，像这样

GeoExt.Action({
    map: map,
    text: "Zoom Box",
    control: new OpenLayers.Control.ZoomBox()
});

但我不知道 GeoExt 是否或如何与 Ext 4 一起工作

关于你问题的第 2 点，我很抱歉，但我无法回答，因为我没有使用 Ext 4 的经验。