[Users] Customizing Layer Trees and Layer Nodes

[IT Intern]

Thank you Andres for your reply.  This line:

attr.iconCls = "your_icon_class_here";

I know by default the gx-tree-layer-icon class is called.  But I am not sure
how to create my own :?.  Also where is this gx-tree-layer-icon located?
Maybe if I look at the class code I'll get it.  Is there a way that I can
have the iconCls just point to an image file?

I ended up using layer containers instead and now I am worried that I won't
be able to customize each node :(  Am I right about this? Here is my tree
structure:

var layerRoot = new Ext.tree.TreeNode({
                text: "All Layers",
                expanded: true
  });

var tibNaturalLayers = new GeoExt.data.LayerStore({
                    map: map,
                    initDir: 0,
                    layers: [tib_villages, tib_rivers, tib_lakes,
tib_grazing, tib_glaciers]
 });

layerRoot.appendChild(new GeoExt.tree.OverlayLayerContainer({
                        text: "Natural Selection (Tibetan trans)",
                        layerStore: tibNaturalLayers,
                        expanded: false,
                        loader: {param: "LAYERS"}
 }));

Thanks for all the support :)

elshae


On Thu, Sep 23, 2010 at 4:10 AM, Andreas Hocevar <ahocevar at opengeo.org>wrote:

> Hi,
>
> the easiest thing to do is indeed just create one WMS layer:
>
> var villages = new OpenLayers.Layer.WMS(
>    "Villages",
>     "http://10.0.102.11:8080/geoserver/wms", {
>         layers: 'cite:tib_townships,cite:tib_villages,cite:chn_villages',
>         transparent: true
>    }, {
>        isBaseLayer: false,
>        displayInLayerSwitcher: true
>    }
> );
>
> Then, you could have an object for your options:
>
> var options = {
>    "cite:tib_townships": {visibility: true, text: "Townships (Tibetan
> trans)"},
>    "cite:tib_villages": {visibility: true, text: "Villages (Tibetan
> trans)"},
>    "cite:chn_villages": {visibility: false, text: "Villages (Chinese
> trans)"}
> };
>
> Now in your tree, add the node for the WMS layer, and configure a loader
> with a custom createNode method that applies your options:
>
> layerRoot.appendChild(new GeoExt.tree.LayerNode({
>     layer: villages,
>    isLeaf: false,
>    loader: {
>        param: "LAYERS",
>        createNode: function(attr) {
>            attr.layer.setVisibility(options[attr.layer.name].visibility);
>            attr.text = options[attr.layer.name].text;
>            attr.iconCls = "your_icon_class_here";
>            GeoExt.tree.LayerParamLoader.prototype.createNode.call(this,
> attr);
>        }
>    }
> });
>
> The iconCls is for your custom icon. See the ExtJS documentation for
> Ext.tree.TreeNode for an explanation.
>
> This should cover about all you were asking.
>
> Regards,
> Andreas.
>
>
>
> On Sep 22, 2010, at 19:37 , IT Intern wrote:
>
> > I sincerely apologize about the previous emails :(, they were sent by
> accident...
> >
> > Hello GeoExt List,
> >
> > I am new to GeoExt and I am grateful such a library has been created.
>  Now I am trying to make a layer tree for my map browser.  I got some ideas
> on how to create a general one, but there are some options I'd like to have
> that I cannot find.  I do not know if it is because they do not exist or I
> am just unaware.
> >
> > Here's what I'd like to do:
> >
> > 1.  I'd like to be able to have a few layers declared by variables as
> such:
> >
> >            var tib_townships = new OpenLayers.Layer.WMS(
> >                             "Townships (Tibetan trans)", "
> http://10.0.102.11:8080/geoserver/wms", {layers: 'cite:tib_townships',
> transparent: true}, {isBaseLayer: false, displayInLayerSwitcher: true,
> visibility: true}
> >                        );
> >
> >             var chn_villages = new OpenLayers.Layer.WMS(
> >                             "Villages (Chinese trans)", "
> http://10.0.102.11:8080/geoserver/wms", {layers: 'cite:chn_villages',
> transparent: true}, {isBaseLayer: false, displayInLayerSwitcher: true,
> visibility: false}
> >                        );
> >
> >             var tib_villages = new OpenLayers.Layer.WMS(
> >                             "Villages (Tibetan trans)", "
> http://10.0.102.11:8080/geoserver/wms", {layers: 'cite:tib_villages',
> transparent: true}, {isBaseLayer: false, displayInLayerSwitcher: true,
> visibility: true}
> >                        );
> >
> > and then I'd like to be able to add these layers to a single node:
> >
> >                 var layerRoot = new Ext.tree.TreeNode({
> >                 text: "All Layers",
> >                 expanded: true
> >                 });
> >
> >                 layerRoot.appendChild(new GeoExt.tree.LayerNode({
> >                 text: "Tibetan Villages",
> >                 layer: tib_villages,
>    //RIGHT HERE, is there a way to add all three layers here using those
> variables???
> >                 loader: {param: "LAYERS"},
> >                 expanded: true
> >                 }));
> >
> > I know my other option is to create a Openlayer WMS with all three layers
> in it sort of as a group, but I run into the same problem there that I am
> unable to add these variables but have to add the layers directly from the
> wms and then they do not have the options I have set in my code :-/
> >
> >
> > 2.  I'd also like to be able to change the names that appear for the
> layers that are in the nodes.  Instead of the wms store:layer, I'd like
> something custom as "my layer".  Is there any property for this anywhere???
> >
> > 3.  I'd like to change the icons of the default layer tree.  Maybe
> instead of folders etc, something like my own image etc..
> >
> > I appreciate all the feedback.  I have been struggling with layer trees
> and I would really like to do something awesome with them for my app.
> >
> > Thanks,
> >
> > elshae
> >
> > _______________________________________________
> > Users mailing list
> > Users at geoext.org
> > http://www.geoext.org/cgi-bin/mailman/listinfo/users
>
>
>
> --
> Andreas Hocevar
> OpenGeo - http://opengeo.org/
> Expert service straight from the developers.
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://www.geoext.org/pipermail/users/attachments/20100923/6d84cd57/attachment.htm