Issue with using a toggleGroup within GeoExt

Question

I'm trying to add a button to a GeoExt application. Ideally I want the button workflow to be:

1. User clicks button. Button is now "Toggled" to on.
2. User clicks somewhere on the map.
3. (This always works) Function behind button is called.
4. Button toggles off.

I have this as my options code:

/* Options to be passed to my create function. */
        options: {
            tooltip: 'Google StreetView',
            iconCls: "icon-streetview",
            enableToggle: false,
            pressed: false,
            toggleGroup: "toolGroup",
            id: "streetview_tool"
        }

I can add the button to the toolbar, but the toggle doesn't work properly. I've tried just about every combination of parameters I can think of.

a) Using the above, I get a console error from GeoExt: TypeError: this.control is undefined . Steps 1 to 3 (above) work this way.

b) If I remove the toggleGroup , I don't get the error (unless enableToggle has been set to true), however the button then never toggles in the first place (steps 2 & 3 are the only ones that happen using this method).

---

There's also a second (Bigger!) problem - it doesn't matter whether the user has toggled the button, every time I click on the map that functionality is triggered!

So my question - how do I get this button-toggle workflow to work? Thanks.

Answer 1

I don't know enough specifics about geoext, but if I understand the issue correctly you can't untoggle the button when you click on the map. I've setup an example which I hope is somewhat similar enough to your issue: https://fiddle.sencha.com/#fiddle/3ms

The solution simply calls

Ext.getCmp('streetview_tool').toggle(false)

when the body of a panel is clicked. Note that this example uses 3.4. Let me know whether this helps or if there's more to the picture I'm missing.