[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<http://www.geobretagne.fr/web/guest/le-visualiseur>
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
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://www.geoext.org/pipermail/users/attachments/20120315/08a0d679/attachment.htm