[Users] Add opacityslider to each tree node

[Zineb LAMRANI]

Hello list,
I want to add opacity slider to each tree node like in this example :
http://dev.geoext.org/sandbox/elemoine/playground/geoext/examples/tree-tools.html
I tried to adapt to my script with no success. Can you help me? because i'm newbie in geoext.

My script is like this:

var LayerNodeUI = Ext.extend(GeoExt.tree.LayerNodeUI, new GeoExt.tree.TreeNodeUIEventMixin_sc());
sbar = function(node, ct) {
    return new Ext.Toolbar({
        cls: "gx-toolbar",
        buttons: [new GeoExt.LayerOpacitySlider({
            layer: node.layer,
            aggressive: true,
            plugins: new GeoExt.LayerOpacitySliderTip(),
            width: 100
        })]
    });
};       
       
// a custom layer node UI class, for use with the second tree (see below).
CustomLayerNodeUI = Ext.extend(GeoExt.tree.LayerNodeUI, {
    component: sbar
});
        //Ajout d'un élément de type "Arborescence" dans le tableau des items
        items.push({
            xtype: "treepanel",
            ref: "tree",
            title: "Couches",
            region: "west",
            width: 300,
            autoScroll: true,
            applyLoader: false,
            enableDD: true,
             plugins: [new GeoExt.tree.LayerOpacitySliderPlugin_a({
                listeners: {
                    "opacityslide": function(node, value)
                    {
                       
                    }               
                }
            })],
            root: new Ext.tree.AsyncTreeNode({
                //nodeType: "gx_overlaylayercontainer",
                text: 'Couches Disponibles',
                allowChildren:true,
                loader: new GeoExt.tree.WMSCapabilitiesLoader(
                {
                uiProviders: {
                    "ui": CustomLayerNodeUI
                },

                url: "/geoserver/wms?SERVICE=WMS&REQUEST=GetCapabilities&VERSION=1.1.1",
                layerOptions: {buffer: 0, singleTile: true, ratio: 1},
                layerParams: {'TRANSPARENT': 'TRUE'},
                // Utiliser la méthode createNode pour ajouter un checkbox devant chaque noeud qui n'a pas d'enfants
                createNode: function(attr) {
                    attr.checked = attr.leaf ? false : undefined;
                    attr.uiProvider=attr.leaf ? "ui":undefined;
                    //attr.slider="layeropacityslider";
                   
                   
                    return GeoExt.tree.WMSCapabilitiesLoader.prototype.createNode.apply(this, [attr]);
                    }}),
            }),
            listeners:
            {
                // Ajouter la couche à la carte quand elle est cochée, retirer quand décochée
                'checkchange': function(node, checked) {
                    if (checked == true)
                    {
                        app.mapPanel.map.addLayer(node.attributes.layer);                       
                    } else {
                        app.mapPanel.map.removeLayer(node.attributes.layer);
                    }
                },
                // Le menu au clic droit
                contextmenu: function (node, e) {   
                node.select();
                var c = node.getOwnerTree().contextMenu;
                c.contextNode = node;
                c.showAt(e.getXY());
                },
                scope: this
            },
            contextMenu: new Ext.menu.Menu({
            // Les boutons du menu contextuel
            items: [{
                // Le bouton zoom sur l'emprise de la couche
                text: "Zoom sur l'emprise de la couche",
                icon:'openlayers/theme/default/img/arrow_out.png',
                handler: function () {
                    var node = app.tree.getSelectionModel().getSelectedNode();
                    if (node && node.attributes.layer) {
                        app.mapPanel.map.zoomToExtent(node.attributes.layer.maxExtent);
                    }
                },
                scope: this
            },
            {
                // Le bouton Débuter mise à jour
                text: "D\351buter une mise \340 jour",
               // icon:'openlayers/theme/default/img/silk_pencil.png',
                handler: function () {
                    var node = app.tree.getSelectionModel().getSelectedNode();
                    if (node && node.attributes.layer) {
                        setLayer(node);
                    }
                },
                scope: this
            },
            {
                // Le bouton Terminer la mise à jour
                text: "Terminer la mise \340 jour",
             //   icon:'openlayers/theme/default/img/silk_pencil.png',
                handler: function() {
                    app.featureGrid.getSelectionModel().clearSelections();// pour éviter que des entités soient toujours sélectionnées
                    drawControl.deactivate();// pour désactiver le drawcontrol
                    vectorLayer.removeAllFeatures();
                    app.featureGrid.reconfigure(
                        new Ext.data.Store(),
                        new Ext.grid.ColumnModel([])
                    );
                    app.featureGrid.setTitle("");
                }
            }
            ]
            })
        });

Thank you for your help,
Best regards,
Zineb