Hello list,<br>I want to add opacity slider to each tree node like in this example :<br><a href="http://www.geobretagne.fr/web/guest/le-visualiseur" target="_blank">http://dev.geoext.org/sandbox/elemoine/playground/geoext/examples/tree-tools.html</a><br>
I tried to adapt to my script with no success. Can you help me? because i&#39;m newbie in geoext.<br><br>My script is like this:<br><br>var LayerNodeUI = Ext.extend(GeoExt.tree.LayerNodeUI, new GeoExt.tree.TreeNodeUIEventMixin_sc());<br>
sbar = function(node, ct) {<br>    return new Ext.Toolbar({<br>        cls: &quot;gx-toolbar&quot;,<br>        buttons: [new GeoExt.LayerOpacitySlider({<br>            layer: node.layer,<br>            aggressive: true,<br>
            plugins: new GeoExt.LayerOpacitySliderTip(),<br>            width: 100<br>        })]<br>    });<br>};        <br>        <br>// a custom layer node UI class, for use with the second tree (see below).<br>CustomLayerNodeUI = Ext.extend(GeoExt.tree.LayerNodeUI, {<br>
    component: sbar<br>});<br>        //Ajout d&#39;un élément de type &quot;Arborescence&quot; dans le tableau des items<br>        items.push({<br>            xtype: &quot;treepanel&quot;,<br>            ref: &quot;tree&quot;,<br>
            title: &quot;Couches&quot;,<br>            region: &quot;west&quot;,<br>            width: 300,<br>            autoScroll: true,<br>            applyLoader: false,<br>            enableDD: true,<br>             plugins: [new GeoExt.tree.LayerOpacitySliderPlugin_a({<br>
                listeners: { <br>                    &quot;opacityslide&quot;: function(node, value) <br>                    { <br>                        <br>                    }                <br>                }<br>
            })],<br>            root: new Ext.tree.AsyncTreeNode({<br>                //nodeType: &quot;gx_overlaylayercontainer&quot;,<br>                text: &#39;Couches Disponibles&#39;,<br>                allowChildren:true,<br>
                loader: new GeoExt.tree.WMSCapabilitiesLoader(<br>                {<br>                uiProviders: {<br>                    &quot;ui&quot;: CustomLayerNodeUI<br>                },<br><br>                url: &quot;/geoserver/wms?SERVICE=WMS&amp;REQUEST=GetCapabilities&amp;VERSION=1.1.1&quot;,<br>
                layerOptions: {buffer: 0, singleTile: true, ratio: 1},<br>                layerParams: {&#39;TRANSPARENT&#39;: &#39;TRUE&#39;},<br>                // Utiliser la méthode createNode pour ajouter un checkbox devant chaque noeud qui n&#39;a pas d&#39;enfants<br>
                createNode: function(attr) {<br>                    attr.checked = attr.leaf ? false : undefined;<br>                    attr.uiProvider=attr.leaf ? &quot;ui&quot;:undefined;<br>                    //attr.slider=&quot;layeropacityslider&quot;;<br>
                    <br>                    <br>                    return GeoExt.tree.WMSCapabilitiesLoader.prototype.createNode.apply(this, [attr]);<br>                    }}),<br>            }),<br>            listeners: <br>
            {<br>                // Ajouter la couche à la carte quand elle est cochée, retirer quand décochée<br>                &#39;checkchange&#39;: function(node, checked) { <br>                    if (checked == true) <br>
                    {<br>                        app.mapPanel.map.addLayer(node.attributes.layer);                        <br>                    } else {<br>                        app.mapPanel.map.removeLayer(node.attributes.layer);<br>
                    }<br>                },<br>                // Le menu au clic droit<br>                contextmenu: function (node, e) {    <br>                node.select();<br>                var c = node.getOwnerTree().contextMenu;<br>
                c.contextNode = node;<br>                c.showAt(e.getXY());<br>                },<br>                scope: this<br>            },<br>            contextMenu: new Ext.menu.Menu({<br>            // Les boutons du menu contextuel<br>
            items: [{<br>                // Le bouton zoom sur l&#39;emprise de la couche<br>                text: &quot;Zoom sur l&#39;emprise de la couche&quot;,<br>                icon:&#39;openlayers/theme/default/img/arrow_out.png&#39;,<br>
                handler: function () {<br>                    var node = app.tree.getSelectionModel().getSelectedNode();<br>                    if (node &amp;&amp; node.attributes.layer) { <br>                        app.mapPanel.map.zoomToExtent(node.attributes.layer.maxExtent);<br>
                    }<br>                },<br>                scope: this<br>            },<br>            {<br>                // Le bouton Débuter mise à jour<br>                text: &quot;D\351buter une mise \340 jour&quot;,<br>
               // icon:&#39;openlayers/theme/default/img/silk_pencil.png&#39;,<br>                handler: function () {<br>                    var node = app.tree.getSelectionModel().getSelectedNode();<br>                    if (node &amp;&amp; node.attributes.layer) {<br>
                        setLayer(node);<br>                    } <br>                },<br>                scope: this<br>            },<br>            {<br>                // Le bouton Terminer la mise à jour<br>                text: &quot;Terminer la mise \340 jour&quot;,<br>
             //   icon:&#39;openlayers/theme/default/img/silk_pencil.png&#39;,<br>                handler: function() {<br>                    app.featureGrid.getSelectionModel().clearSelections();// pour éviter que des entités soient toujours sélectionnées<br>
                    drawControl.deactivate();// pour désactiver le drawcontrol<br>                    vectorLayer.removeAllFeatures();<br>                    app.featureGrid.reconfigure(<br>                        new Ext.data.Store(),<br>
                        new Ext.grid.ColumnModel([])<br>                    );<br>                    app.featureGrid.setTitle(&quot;&quot;);<br>                }<br>            }<br>            ]<br>            })<br>        });<br>
<br>
Thank you for your help,<br>Best regards,<br>Zineb<br>