Apend child to a layertree

[rychu83]

HI

I the build applications with geoext 2 opengeo apartment and I'm trying to create a tree layer with some "grouped" layers , as the last node here I saw somewhere that you should set the node type to " gx_layer " to get the desired effect . Unfortunately, inaction and even though the tree has a form of what I want but it does not work ; / PLEASE HELP This is my code:

Ext.require([
    'Ext.container.Viewport',
    'Ext.layout.container.Border',
    'GeoExt.tree.Panel',
    'Ext.tree.plugin.TreeViewDragDrop',
    'GeoExt.panel.Map',
    'GeoExt.tree.OverlayLayerContainer',
    'GeoExt.tree.BaseLayerContainer',
    'GeoExt.data.LayerTreeModel',
    'GeoExt.tree.View',
    'GeoExt.tree.Column',
    'GeoExt.tree.LayerFolderNode',
    'GeoExt.tree.LayerContainer'
]);

var mapPanel, tree;

 var layer = new OpenLayers.Layer.WMS()
layer.layerCreationType = 'DYNAMIC';

Ext.application({
    name: 'Tree',
    launch: function() {
        // create a map panel with some layers that we will show in our layer tree
        // below.
        mapPanel = Ext.create('GeoExt.panel.Map', {
            border: true,
            region: "center",
            // we do not want all overlays, to try the OverlayLayerContainer
            map: {allOverlays: false},
            center: [21.011658, 52.229858],
            zoom:15,

            layers: [

                new OpenLayers.Layer.WMS("OpenStreetMap WMS",
                    "https://ows.terrestris.de/osm/service?",
                    {layers: 'OSM-WMS'},
                    {
                        attribution: '© terrestris GmbH & Co. KG 
' +
                            'Data © OpenStreetMap ' +
                            'contributors'
                    }
                ),
                new OpenLayers.Layer.WMS("Country Borders",
                    "https://ows.terrestris.de/geoserver/osm/wms", {
                        layers: "osm:osm-country-borders",
                        transparent: true,
                        format: "image/png"
                    }, {
                        isBaseLayer: false,
                        resolutions: [
                            1.40625,
                            0.703125,
                            0.3515625,
                            0.17578125,
                            0.087890625,
                            0.0439453125,
                            0.02197265625,
                            0.010986328125,
                            0.0054931640625
                        ],
                        buffer: 0
                    }
                ),
             new OpenLayers.Layer.WMS("Gas Stations",
                    "https://ows.terrestris.de/geoserver/osm/wms", {
                        layers: "osm:osm-fuel",
                        transparent: true,
                        format: "image/png"
                    }, {
                        isBaseLayer: false,
                        visibility: false,
                        buffer: 0

                    }
                ),

        new OpenLayers.Layer.WMS("Bla",
                    "https://ows.terrestris.de/geoserver/osm/wms", {
                        layers: "osm:osm-fuel",
                        transparent: true,
                        format: "image/png"
                    }, {
                        isBaseLayer: false,
                        visibility: false,
                        buffer: 0,
                    }
                ),
                new OpenLayers.Layer.WMS("Bus Stops",
                    "https://ows.terrestris.de/osm-haltestellen?",
                    {
                        layers: 'OSM-Bushaltestellen',
                        format: 'image/png',
                        transparent: true
                    },
                    {
                        singleTile: true,
                        visibility: false
                    }
                ),

                // create a group layer (with several layers in the "layers" param)
                // to show how the LayerParamLoader works
                new OpenLayers.Layer.WMS("Tasmania (Group Layer)",
                    "http://demo.opengeo.org/geoserver/wms", {
                        layers: [
                            "topp:tasmania_state_boundaries",
                            "topp:tasmania_water_bodies",
                            "topp:tasmania_cities",
                            "topp:tasmania_roads"
                        ],
                        transparent: true,
                        format: "image/gif"
                    }, {
                        isBaseLayer: false,
                        buffer: 0,
                        // exclude this layer from layer container nodes
                        displayInLayerSwitcher: true,
                        visibility: false
                    }
                )
            ]
        });
this.layerStore = Ext.create('GeoExt.data.LayerStore',{strong text
            map:this.map
        });

    var store = Ext.create('Ext.data.TreeStore', {
        model: 'GeoExt.data.LayerTreeModel',
        root: {
        expanded: true, 

    children: [

    {
                    plugins: ['gx_baselayercontainer'],
                    expanded: true,
                    text: "Wybór Mapy Podkładowej"
                },

        { text: "2016", expanded: false, checked: false,
        children: [

        {
            text: "test2",
            layer: 'Bla',
            onCheckChange: true,

            expanded: false,
            checked: false,
            nodeType: 'gx_layer'

},
            {
                text: "test1",
                layer: 'Bus Stops',
                onCheckChange: true,

            expanded: false,
            checked: false,
            nodeType: 'gx_layer'

},

        {   plugins: ['gx_overlaylayercontainer'],
                                        expanded: true,

        }

var layer;

    // create the tree with the configuration from above
    tree = Ext.create('GeoExt.tree.Panel', {
        border: true,
        region: "west",
        title: "Warstwy",
        width: 250,
        split: true,
        collapsible: true,
        collapseMode: "mini",
        autoScroll: true,
        store: store,
        rootVisible: false,
        lines: false,

         listeners: {
            checkchange: function (record, checked, opts) {
                var layerid = record.parentNode.data.id;

                // check/uncheck all child nodes
                if(!record.data.leaf) {
                    record.cascadeBy(function() {
                        this.set('checked', record.data.checked);
                        try {
                            this.data.layer.setVisibility(record.data.checked);
                        }
                        catch(e) {}
                    });
                }

                try {
                    var excludelayerids = ['baselayernode'];
                    if(excludelayerids.indexOf(layerid) < 0) {
                        if(!record.data.layer.visibility)
                            record.data.layer.setVisibility(true);
                        else
                            record.data.layer.setVisibility(false);
                    }
                }
                catch(e) {}
            },
            itemclick: {
                fn: function(view, record, item, index, event) {
                    selectedLayerId = record.data.layer.id;
                    //alert(selectedLayerId);
                }
            }
        }
    });

    Ext.create('Ext.Viewport', {
        layout: "fit",
        hideBorders: true,
        items: {
            layout: "border",
            deferredRender: false,
            items: [mapPanel, tree, {
                contentEl: "desc",
                region: "east",
                bodyStyle: {"padding": "5px"},
                collapsible: true,
                collapseMode: "mini",
                split: true,
                width: 200,
                title: "Description"
            }]
        }
    });
}

});

[elasticrash]

I got a working example here if you want to take a look at the source

[rychu83]

hi very nice map and made ​​fun ; ) unfortunately I can not add
var Bla = new OpenLayers.Layer.WMS("Bla", if I add VAR page does not open ; /

[elasticrash]

if you want to append a layer in the tree you do it like this. Sorry but I cannot understand what you want to do

var opmap= new OpenLayers.Layer.WMS(
            displayname, geoserverWmsDefaults.wmsUrl,
            {
                LAYERS: layername,
                STYLES: layerstyle,
                format: 'image/png',
                transparent: true
            },
            {
                buffer: 0,
                displayOutsideMaxExtent: true,
                isBaseLayer: false,
                visibility: false
            }
        );

var treeNode = tree.getRootNode();
                                    treeNode.getChildAt(0).appendChild({
                                        text: opmap.name,
                                        layer: opmap,
                                        leaf: true,
                                        checked: false,
                                        children: [],
                                        nodeType: "gx_overlaylayercontainer"
                                    });

[rychu83]

Hey Thank you for your interest and for your help and sorry for possible weak explanation unfortunately I am a novice on the high seas ; ) I you trying to create a menu tree as below here , perhaps more clearly the main levels there will be the base layer ( 2-5 maps) and several layers such as 2015 and 2016 other and below each of them a few more choices. Launched by the way you unfortunately did not work something wrong maybe I changed my code ; / you can help to advance our example.

Regards Lukas

 var store = Ext.create('Ext.data.TreeStore', {
                model: 'GeoExt.data.LayerTreeModel',
                root: {
                expanded: true, 

        children: [ {
                        plugins: ['gx_baselayercontainer'],
                        expanded: true,
                        text: "Wybór Mapy Podkładowej"
                    }, { 
                    text: "2016", 
                    expanded: false, 
                    checked: false,
                            children: [

                            { text: "Styczeń", expanded: false, checked: false,

                                        children: [
                                                        { text: "1.1", leaf: true, expanded: true, checked: false},
                                                        { text: "2.1", leaf: true, expanded: true, checked: false},
                                                        { text: "3.1", leaf: true, expanded: true, checked: false},
                                                        { text: "4.1", leaf: true, expanded: true, checked: false},
                                                        { text: "5.1", leaf: true, expanded: true, checked: false},
                                                        { text: "6.1", leaf: true, expanded: true, checked: false},
                                                        { text: "7.1", leaf: true, expanded: true, checked: false},

                                ] },
                                { text: "Luty", expanded: false, checked: false,

                                        children: [
                                                        { text: "1.2", leaf: true, expanded: true, checked: false},
                                                        { text: "2.2", leaf: true, expanded: true, checked: false},
                                                        { text: "3.2", leaf: true, expanded: true, checked: false},
                                                        { text: "4.2", leaf: true, expanded: true, checked: false},
                                                        { text: "5.2", leaf: true, expanded: true, checked: false},
                                                        { text: "6.2", leaf: true, expanded: true, checked: false},
                                                        { text: "7.2", leaf: true, expanded: true, checked: false},

                                ] },
                                { text: "Marzec", expanded: false, checked: false,

                                        children: [
                                                        { text: "1.3", leaf: true, expanded: true, checked: false},
                                                        { text: "2.3", leaf: true, expanded: true, checked: false},
                                                        { text: "3.3", leaf: true, expanded: true, checked: false},
                                                        { text: "4.3", leaf: true, expanded: true, checked: false},
                                                        { text: "5.3", leaf: true, expanded: true, checked: false},
                                                        { text: "6.3", leaf: true, expanded: true, checked: false},
                                                        { text: "7.3", leaf: true, expanded: true, checked: false},

] },
]),
 { 
                    text: "2015", 
                    expanded: false, 
                    checked: false,
                            children: [

                            { text: "Styczeń", expanded: false, checked: false,

                                        children: [
                                                        { text: "1.1", leaf: true, expanded: true, checked: false},
                                                        { text: "2.1", leaf: true, expanded: true, checked: false},
                                                        { text: "3.1", leaf: true, expanded: true, checked: false},
                                                        { text: "4.1", leaf: true, expanded: true, checked: false},
                                                        { text: "5.1", leaf: true, expanded: true, checked: false},
                                                        { text: "6.1", leaf: true, expanded: true, checked: false},
                                                        { text: "7.1", leaf: true, expanded: true, checked: false},

                                ] },
                                { text: "Luty", expanded: false, checked: false,

                                        children: [
                                                        { text: "1.2", leaf: true, expanded: true, checked: false},
                                                        { text: "2.2", leaf: true, expanded: true, checked: false},
                                                        { text: "3.2", leaf: true, expanded: true, checked: false},
                                                        { text: "4.2", leaf: true, expanded: true, checked: false},
                                                        { text: "5.2", leaf: true, expanded: true, checked: false},
                                                        { text: "6.2", leaf: true, expanded: true, checked: false},
                                                        { text: "7.2", leaf: true, expanded: true, checked: false},

                                ] },
                                { text: "Marzec", expanded: false, checked: false,

                                        children: [
                                                        { text: "1.3", leaf: true, expanded: true, checked: false},
                                                        { text: "2.3", leaf: true, expanded: true, checked: false},
                                                        { text: "3.3", leaf: true, expanded: true, checked: false},
                                                        { text: "4.3", leaf: true, expanded: true, checked: false},
                                                        { text: "5.3", leaf: true, expanded: true, checked: false},
                                                        { text: "6.3", leaf: true, expanded: true, checked: false},
                                                        { text: "7.3", leaf: true, expanded: true, checked: false},

                                ] },

[bentrm]

@rychu83, please point questions about the usage of the library to the GeoExt mailing list or Stack Overflow. GitHub Issues are used for bug tracking only.

If you think your problem is due to a bug in GeoExt, feel free to reopen or post a new issue. Thanks.

[shahidnawazkhan]

@elasticrash as you mentioned about appending a layer in tree in above comments I've a question. What if we want to have a WMS legend for that layer in the layer tree. Do we need to explicitly mention it in the store and mention it with the child node