Search code examples
javascriptextjscheckboxopenlayers

Is it possible to call two functions if ext.form.checkbox is checked? Or why my layers in openlayers won't re-order (both problems are linked)


I have an Ext checkbox that add a layer on my OpenLayers map. When a layer is added from map.addLayer, it appears at the end (on top) of the layers (we can see this in the layerSwitcher). I simply want to re-order them after I create the new layer. The problem is coming from the checkbox. I launch a function when checked, but the map won't be added until the function has ended (I don't know why). So when I add the line to re-order the maps at the end of the function, it doesn't re-order the maps at all (it seems this is because the same is still not created while inside the function).

This is the code of my checkbox:

new Ext.form.Checkbox({
    title: extjs_gui_products_analyses_checkbox_title,
    id: 'analyses_checkbox_extjs',
    boxLabel: extjs_gui_products_analyses_checkbox_label,
    inputValue: extjs_gui_products_analyses_checkbox_label,
    listeners: {
        check: addAnalyseLayer // reorderGmlLayersOnTop
    }
})

I thought I could add the line to re-order in another function then, and call it just after? So I made a function named reorderGmlLayersOnTop and tried to add it as another check: reorderGmlLayersOnTop. It's not working (it crashes), so I suppose the synthax is wrong. I checked the Ext manual and it never says we can actually call two functions. Is there a way to call two functions? And if yes, what would be the syntax to do so?

If not, would you have another idea to re-order the layers after the checkbox is checked?

This is the code from my function that add the layer

function addAnalyseLayer(checkbox, checked){
if(checked){

    Ext.Ajax.request({
        url: './PHP/WMS_Validator.php',
        params: {
                    product: "analyse",
                    timechop: timeChopArray[currentStateIndex],
                    date: currentStateDate.getUTCFullYear() + ('0' + (currentStateDate.getUTCMonth() + 1)).slice(-2) + ('0' + currentStateDate.getUTCDate()).slice(-2),
                    type: currentStatePeriod
                },
        method: 'GET',
        success: function(result, request) {
                                                if (result.responseText != "invalid") {

                                                    map.addLayer(new OpenLayers.Layer.WMS(openlayers_wms_layer_analyses, CMCDataServer, {
                                                        layers: analysesWMSLayer[currentStatePeriod],
                                                        styles: analysesWMSStyle[currentStatePeriod],
                                                        format: "image/png",
                                                        transparent: true,
                                                        time: currentStateDate.getUTCFullYear() + "-" + ('0' + (currentStateDate.getUTCMonth() + 1)).slice(-2) + "-" + ('0' + currentStateDate.getUTCDate()).slice(-2) + "T" + timeChopArray[currentStateIndex] + ":00:00Z"
                                                    },
                                                    {
                                                        opacity: opacityLevelAnalyses,
                                                        visibility: true
                                                    }));

                                                   Ext.getCmp('analyses_validity_display_extjs').setValue(extjs_gui_state_panel_valid_analyses);
                                                   Ext.getCmp('extjs_gui_legend_tab_panels').setActiveTab(0);

                                                } else {
                                                                                        //this is also a user request to insure users don't wait for observation data that doesn't exist
                                                                                        Ext.getCmp('analyses_validity_display_extjs').setValue(extjs_gui_state_panel_invalid_analyses);
                                                                                        Ext.Msg.alert(extjs_gui_analyses_missing_warning_title, extjs_gui_analyses_missing_warning);
                                                                                        Ext.getCmp('analyses_checkbox_extjs').setValue(false);
                                                }
                                            }
});

}else if(map.getLayersByName(openlayers_wms_layer_analyses).length!=0){
    adjustStatePanelAnalysesValidity();
    map.removeLayer(map.getLayersByName(openlayers_wms_layer_analyses)[0]);
}
    adjustStatePanelProducts(checkbox, checked);

    //MY TEST
    map.raiseLayer(map.getLayersByName(openlayers_gml_layer_canada_bv)[0], map.getNumLayers()-1);
}

You can see //MY TEST near the end of the code. This is what I tried, but it's not re-ordering the layers at all. Still, if I type it in the console, it re-orders the layers perfectly like I want it to (well it re-orders just one layer, but if that works I'll mod it to have what I want).

So, would you have an idea? I can't seem to find the solution by myself.

Thanks anyway guys for your help.

UPDATE:


I tried to change the order from the toggle function of the other layer, this is the code after changes

function toggleCanadaBV(){
    if(map.getLayersByName(openlayers_gml_layer_canada_bv)[0].getVisibility()){
        map.getLayersByName(openlayers_gml_layer_canada_bv)[0].setVisibility(false);
    }else{
        map.getLayersByName(openlayers_gml_layer_canada_bv)[0].setVisibility(true);
        map.setLayerIndex(map.getLayersByName(openlayers_gml_layer_canada_bv)[0], 700);
        map.raiseLayer(map.getLayersByName(openlayers_gml_layer_canada_bv)[0], map.getNumLayers()-1);
    }
}

But it's still not doing what I want at all... I don't understand.

I also tried to check my layer (that I add in the function) at the end of the function, and it's undefined even if I add it in the function...

Finally, I tried to place a button that trigger my function, and it works. So my function is correct WHEN launched from outside the checkbox or the toggles...


Solution

  • Finally, I have no idea why I could not re-order the "other" layer, but I found a solution at least.

    I added map.raiseLayer(map.getLayersByName(openlayers_wms_layer_analyses)[0], -map.getNumLayers()); just after I add the layer, to create the layer at the start of the index order. That way, everything else is on top. If you have a similar problem, I hope this will help guys.