Using the code below in this jsfiddle example:

tree = new Ext.tree.TreePanel({
        renderTo: "tree",
        root: new GeoExt.tree.LayerContainer({
            text: 'Map Layers',
            layerStore: panel.layers,
            leaf: false,
            expanded: true
            loader: {
                filter: function (record) {
                    return record.get("layer").name.indexOf("tasmania") !== -1
                createNode: function (attr) {
                    // add a WMS legend to each node created
                    attr.component = {
                        xtype: "gx_wmslegend",
                        layerRecord: mapPanel.layers.getByLayer(attr.layer),
                        showTitle: false,
                        // custom class for css positioning
                        // see tree-legend.html
                        cls: "legend"
                    return GeoExt.tree.LayerLoader.prototype.createNode.call(this, attr);
        enableDD: true,
        rootVisible: false,
        width: 170,
        height: 300,
        floating: true,
        x: 380,
        y: 0

I would like to get the legend of the added layers to the tree panel (for instance, "og:archsites"). The jsfiddle code does not work if I uncomment the loader, I think it should work but it doesn't. So, is this possible this way? I use geoext v1.1 in this jsfiddle example.

  • sorry for bumping this one, but does anyone have some hints about this post? – Gery Dec 16 '14 at 12:37

The thing is that the legend of a wms service is actually an image. Having said that how can you display an image inside the tree?

what I usually do is either use the Legend Panel, which i can understand is neither handy or neat or use an event to manually get the legend of the layer and display it somewhere more handy. for example:

        tree.on('itemclick', function(view, record, item, index, event) {
            selectedLayer = [record.data.layer];
            if(selectedLayer[0].params.STYLES!="") {
                Ext.get(legend_image).dom.src = geoserverWmsDefaults.wmsUrl + "REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=30&HEIGHT=30&STRICT=false&style=" +

I know it doesn't actually answer the initial question but I don't think there is an easy way to achieve what you are asking.

  • @elasticrahs thanks your answer and code, I'll try to adapt it to my jsfiddle example. Actually, I found this example dev.geoext.org/geoext/sandbox/mapgears/geoext.ux/ux/… that does what I want, I tried to use it but it groups layers, I simply need the legend image below the layer after it is clicked (for instance, when Vector is clicked in the example). Does your above code put the image below the layer similar to the example above? if you could add it to the jsfiddle and it works I accept it as answer! – Gery Dec 16 '14 at 13:35
  • 1
    That's a pretty nice plugin, I myself prefer to use geoext2 so I mostly build things from scratch since geoext2 doesn't yet have the functionality that geoext 1.1 did. As far as it concerns your question, No it doesn't add it below the layer it adds it somewhere else completely. I got a live example here soilmap.elpho.biz/SoilServices/danger.html – elasticrash Dec 16 '14 at 14:22
  • I don't mind whether you accept or not my answer :-) I Just do it for the fun of sharing knowledge – elasticrash Dec 16 '14 at 14:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.