带有 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

我也在使用 MapFish，使用 Ext 3.4。

首先，你有一个 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的经验。