I cannot draw a line with a function

Question

I'm working with GeoExt and Openlayers and HTML, and I need to draw a line when the user clicks an HTML button. I created a Function Prueba, but nothing happens. If I want to add a control with my function, it works perfectly. Thanks for your help. Here is my js code:

Ext.Loader.setConfig({
    enabled: true,
    disableCaching: false,
    paths: {
        GeoExt:"GeoExt"
    }
});

Ext.require([
   'GeoExt.panel.Map'
]); 


Ext.onReady(function() {
    var me = this,layers = [];
      var apiKey =   "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf";

        //Mapa OpenLayer
        map = new OpenLayers.Map('map');

        //Mapas OpenLayer WMS:Web Map Service////
        var Wms = new OpenLayers.Layer.WMS("OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0",{layers: 'basic'});
        var OpnSt= new OpenLayers.Layer.OSM.Mapnik("Mapa OpenStreet");

        //Mapas de Google/////
        var gphy = new OpenLayers.Layer.Google(
            "Google Fisico",
            {type: google.maps.MapTypeId.TERRAIN}
        );
        var gmap = new OpenLayers.Layer.Google(
            "Google Calles",
            {numZoomLevels: 20}
        );
        var ghyb = new OpenLayers.Layer.Google(
            "Google Hybrido",
            {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
        );
        var gsat = new OpenLayers.Layer.Google(
            "Google Satelite",
            {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
        );
        //Mapa Bing
        var bing =new OpenLayers.Layer.Bing({
            key: apiKey,
            type: "AerialWithLabels",
            name: "Bing Aereo + Texto",
            transitionEffect: 'resize'
        });

        var bingRoad = new OpenLayers.Layer.Bing({
            key: apiKey,
            type: "Road",
            // custom metadata parameter to request the new map style - only useful
            // before May 1st, 2011
            metadataParams: {
                mapVersion: "v1"
            },
            name: "Bing Caminos",
            transitionEffect: 'resize'
        });


     //Creamos el Panel Switcher 
    map.addControl(new OpenLayers.Control.LayerSwitcher());
    map.addControl(new OpenLayers.Control.ScaleLine());
    map.addControl(new OpenLayers.Control.MousePosition({prefix:'Longitud | Latitud: ', separator: ' | '}));
    //Agregamos los tipos de Mapas
    map.addLayers([OpnSt,gmap,gphy,ghyb,gsat,bing,bingRoad]);

    var mapPanel = Ext.create("GeoExt.panel.Map", {
        renderTo: "DivMap",
        layout: 'fit',
        border:false,
        width: "100%",
        height: "100%",
        map: map,
        zoom: 2

    });
});



function Prueba(){
    var vector = new OpenLayers.Layer.Vector("Lineas");
    map.addLayer(vector);
    var line= new OpenLayers.Control.DrawFeature(vector, OpenLayers.Handler.Path);
    map.addControl(line);
}   

and here is my HTML code when user clicks:

<td class="op"><input type="checkbox"  value="line" onclick="Prueba()" name="type"/></td>

Answer 1

Some controls in OpenLayers are used to interact with objects in the map. These controls need to be activated.

You can have only one such active control at one time.

To activate the Draw Feature control in your code, your function should be:

function Prueba(){
    var vector = new OpenLayers.Layer.Vector("Lineas");
    map.addLayer(vector);
    var line= new OpenLayers.Control.DrawFeature(vector,OpenLayers.Handler.Path);
   map.addControl(line);
   line.activate(); //you have forgotten this
}

Some controls are not used to directly interact with objects in the map. These controls need not be activated. Examples of adding such controls:

map.addControl(new OpenLayers.Control.PanZoomBar());
map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false}));
map.addControl(new OpenLayers.Control.Permalink());
map.addControl(new OpenLayers.Control.Permalink('permalink'));
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.OverviewMap());
map.addControl(new OpenLayers.Control.KeyboardDefaults());

Answer 2

Here is a link which may help you.