title: Combining two control panels(AB) or toggle them (A) or (B)
body: <p>I have two control panels; one is for the default draw features, the other for measure tools.</p>
  
  <p>The problem is that since they are in different panels it is possible to run two controls simultaneously, one from each panel. (this didn't seem like much of a problem before, but I noticed that when the measure and default draw tools are activated together, they cancel out the line end function)</p>
  
  <p>What I am trying to do is either place all controls in one panel and toggle them together or toggle the panels(e.g. when control from panel 1 is activated, deactivate all controls in panel 2)</p>
  
  <p>Here is my code:</p>
  
  <p>Default Controls Panel:</p>
  
  <pre><code>OpenLayers.Control.CustomNavToolbar = OpenLayers.Class(OpenLayers.Control.Panel,{
    initialize: function(options){
      OpenLayers.Control.Panel.prototype.initialize.apply(this, [options]);
      this.addControls([
        new OpenLayers.Control.Navigation({displayClass: 'olControlNavigation', zoomBoxEnabled:false}),
        new OpenLayers.Control.DrawFeature(vlayer, OpenLayers.Handler.Point, {displayClass: 'olControlDrawPoint'}),
        new OpenLayers.Control.DrawFeature(vlayer, OpenLayers.Handler.Path, {displayClass: 'olControlDrawPath'}),
        new OpenLayers.Control.DrawFeature(vlayer, OpenLayers.Handler.Polygon, {displayClass: 'olControlDrawPolygon'}),
        new OpenLayers.Control.ZoomBox({displayClass: 'olControlZoomBox', alwaysZoom:true})
      ])
      this.displayClass = 'olControlCustomNavToolbar'
    },
    draw: function(){
      var div = OpenLayers.Control.Panel.prototype.draw.apply(this, arguments);
      this.defaultControl = this.controls[0];
      return div;
    }
  });
  var panel = new OpenLayers.Control.CustomNavToolbar({div:OpenLayers.Util.getElement('panel')});
  map.addControl(panel);
  </code></pre>
  
  <p>Measure Controls Panel:</p>
  
  <pre><code>allControls = {
    line: new OpenLayers.Control.Measure(OpenLayers.Handler.Path, {
      persist: true,
      handlerOptions: {
        layerOptions: {
          renderers: renderer,
          styleMap: styleMap
        }
      },
      textNodes: null,
      callbacks:{
        create:
        function(){
          this.textNodes = [];
  //      vlayer.destroyFeatures(vlayer.features);
          mouseMovements = 0;
        },
        modify:
        function(point, line){
          if(mouseMovements++ &lt; 5){
            return;
          }
          var len = line.geometry.components.length;
          var from = line.geometry.components[len -2];
          var to = line.geometry.components[len -1];
          var ls = new OpenLayers.Geometry.LineString([from, to]);
          var dist = this.getBestLength(ls);
          if(!dist[0]){
            return;
          }
          var total = this.getBestLength(line.geometry);
          var label = dist[0].toFixed(3) + " " + dist[1];
          var textNode = this.textNodes[len -2] || null;
          if(textNode &amp;&amp; !textNode.layer){
            this.textNodes.pop();
            textNode = null;
          }
          if(!textNode){
            var c = ls.getCentroid();
            textNode = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(c.x, c.y), {}, {
              label: "",
              fontColor: "#800517",
              fontSize: "13px",
              fontFamily: "Tahoma",
              fontWeight: "bold",
              labelAlign: "cm"
            });
            this.textNodes.push(textNode);
            vlayer.addFeatures([textNode]);
          }
          textNode.geometry.x = (from.x + to.x) / 2;
          textNode.geometry.y = (from.y + to.y) / 2;
          textNode.style.label = label;   
          textNode.layer.drawFeature(textNode);
          this.events.triggerEvent("measuredynamic", {
            measure: dist[0],
            total: total[0],
            units: dist[1],
            order: 1,
            geometry: ls
          });
        }
      }
    }),
    polygon: new OpenLayers.Control.Measure(
      OpenLayers.Handler.Polygon, {
        persist: true,
        immediate: true,
        handlerOptions: {
          layerOptions: {
            renderers: renderer,
            styleMap: styleMap
          }
        }
      }
    )
  };
  
  var control;
  for(var key in allControls) {
    control = allControls[key];
    control.events.on({
      "measure": handleMeasurements,
      "measurepartial": handleMeasurements
    });
    map.addControl(control);
  }
  </code></pre>
  
  <p>..and just for reference</p>
  
  <pre><code>function handleMeasurements(evt){
    var geometry = evt.geometry;
    var units = evt.units;
    var order = evt.order;
    var measure = evt.measure;
    var element = document.getElementById('output');
    var position = (map.getLonLatPxFromViewPortPx);
    var out = "";
    if(order == 1){
      out += "Distance: " + measure.toFixed(3) + " " + units;
    }
    else{
      out += "Area: " + measure.toFixed(3) + " " + units + "&lt;sup&gt;2&lt;/" + "sup&gt;";
    }
    element.innerHTML = out;
  }
  
  function toggleControl(element){
    vlayer.destroyFeatures(vlayer.features);
    for(key in allControls){
      var control = allControls[key];
      if(element.value == key &amp;&amp; element.click){
        control.activate();
        var label = document.getElementById('output');
        var emptyOut = "";
        label.innerHTML = emptyOut;
      }
      else{
        control.deactivate();
      }
    }
  }
  </code></pre>
  
  <p>Been looking for a way to do this and so far have not been able to find anything useful, if you could help me with some suggestions about how to go about this it would be very appreciated. Thanks</p>
  
  <p><b>EDIT:</b> I am not using GeoExt and am not considering using it. I'm looking for suggestions about how to go about this using only the OpenLayers 2.11 library. Thanks again.</p>