Reputation: 4190
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 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
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