Cristhian Boujon
Cristhian Boujon

Reputation: 4190

Change default image in tree node with Extjs

I'm using GeoExt (based on ExtJs) to create a tree. In each node I want the corresponding image at left instead of the default image default image like this site. How can I do it?

Edit

I found this example but I don't know how can I add childrens

Edit 2 Here is part of my code:

var bpn = new OpenLayers.Layer.WMS("bpn", 
    url,
    {
        LAYERS: [ 'Año 2004', 'Año 2005', 'Año 2006', 'Año 2007', 'Año 2009'],
        format: "image/png",
        transparent: "true",
        projection: 'EPSG:4326'
     },
     {
         buffer: 0, 
         displayOutsideMaxExtent: true,
         isBaseLayer: false,
         displayInLayerSwitcher: false,
         yx: {'EPSG:4326' : true}
      });

var treeConfig = [
    {
        nodeType: "gx_layer",
        layer: bpn,
        isLeaf: false,

        loader: {
            param: "LAYERS",

        },
        expanded: false
    }];

tree = new Ext.tree.TreePanel({
    border: true,
    region: "west",
    title: "Entre Ríos",
    width: 250,
    split: true,
    collapsible: true,
    collapseMode: "mini",
    autoScroll: true,

    loader: new Ext.tree.TreeLoader({
        applyLoader: true,
        uiProviders: {
            "layernodeui": LayerNodeUI
        }
    }),
    root: {
        nodeType: "async",
        children: treeConfig
    },     
    rootVisible: false,
    lines: false,
});

Each layer (node)'Año 2004', 'Año 2005', 'Año 2006', 'Año 2007', 'Año 2009' has a different image. What should I change in treeConfig?

Upvotes: 0

Views: 3556

Answers (1)

rixo
rixo

Reputation: 25001

This is achieved by using an iconCls field in nodes data.

Edit

Example (see fiddle):

Ext.widget('treepanel', {
    renderTo: Ext.getBody(),
    height: 200,
    store: new Ext.data.TreeStore({
        root: {
            text: 'Root',
            expanded: true,
            children: [{
                text: 'Node 1',
                iconCls: 'icon1'
            },{
                text: 'Node 2',
                iconCls: 'icon2'
            },{
                text: 'Node 3',
                iconCls: 'icon1'
            }]
        }
    })
});

Upvotes: 1

Related Questions