ExtJS4 toolbar with OpenLayers code

Question

We are using Mapfish toolbar with ExtJS3.2 in our application. Now we are trying to upgrade ExtJS3.2 to ExtJS4. But mapfish is not working with ExtJS4. So, we are using ExtJS4 toolbar, but openlayers code which is written for button in toolbar is not executing.

ExtJS4 code is:

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

Here if we click on the zoom in button control is going into OpenLayers.Control.ZoomBox but the draw method is not executing. My questions are:

1. Is there any thing wrong in the code?
2. Is there any other way to approach OpenLayers with ExtJS4?

Answer 1

I am using MapFish too, with Ext 3.4.

First of all you have a fucntion() instead of function() :)

Then, may be I haven't understand what you want to do, but I think -IMAO- that this is not a good way to use the ZoomBox control... You should add the ZoomBox control to the map while you create it and give the control an id, then use a listener for the toggle event like this:

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

This way when you press the button you enable the control, and when you press it again you disable it. Keep in mind that the ZoomBox control, once active, can also be always available by holding shift

Or you could also use GeoExt, which is really easy, like this

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

But I don't know if or how GeoExt works with Ext 4

As for the point 2 of your question, I am sorry but I cannot answer that, because I have no experience with Ext 4.