Объединяя две панели управления (AB) или переключая их (A) или (B)

Question

у меня две панели управления; один для функций рисования по умолчанию, другой для инструментов измерения.

Проблема в том, что, поскольку они находятся на разных панелях, можно запускать два элемента управления одновременно, по одному на каждой панели. (раньше это не казалось большой проблемой, но я заметил, что когда инструменты рисования по мере и по умолчанию активируются вместе, они отменяют функцию конца строки)

Я пытаюсь либо разместить все элементы управления на одной панели и переключать их вместе, либо переключать панели (например, когда элемент управления с панели 1 активирован, деактивировать все элементы управления на панели 2)

Вот мой код:

Панель управления по умолчанию:

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

Панель управления измерениями:

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++ < 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 && !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);
}

.. и просто для справки

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 + "<sup>2</" + "sup>";
  }
  element.innerHTML = out;
}

function toggleControl(element){
  vlayer.destroyFeatures(vlayer.features);
  for(key in allControls){
    var control = allControls[key];
    if(element.value == key && element.click){
      control.activate();
      var label = document.getElementById('output');
      var emptyOut = "";
      label.innerHTML = emptyOut;
    }
    else{
      control.deactivate();
    }
  }
}

Я искал способ сделать это и до сих пор не смог найти ничего полезного, если бы вы могли помочь мне с некоторыми предложениями о том, как это сделать, это было бы очень признательно. Спасибо

РЕДАКТИРОВАТЬ: Я не использую GeoExt и не рассматриваю возможность его использования. Я ищу предложения о том, как это сделать, используя только библиотеку OpenLayers 2.11. Еще раз спасибо.