extjs load image in TreePanel

Question

Hi, i created a Ext.TreePanel and i would have in the node an image, in the text of the node i have the url to the image but i can't load it in the page, i see only the text, there is the possibility to view the image?

this is my code

var root1 = new Tree.AsyncTreeNode({
 text: 'Legenda degli starti PAT',
 draggable:true, // disable root node dragging
 id:'source'
});

var tree1 = new Tree.TreePanel({
 renderTo : 'legend',
 animate:true, 
 loader: new Tree.TreeLoader({dataUrl:'legend.php'}),
 containerScroll: true,
 root: root1,
});

and this is the response of the TreePanel request

[{"text":"comuni","id":"co","leaf":false,"cls":"folder","children":[{"text":"http:\/\/localhost\
/cgi-bin\/mapserv?map=\/home\/gis\/mapserver\/cartocomune_wms.map&SERVICE=wms&FORMAT=png&VERSION=1.1
.1&LAYER=comuni&REQUEST=GetLegendGraphic","id":"comuni","leaf":true,"cls":"file"}]},{"text":"idrografia"
,"id":"id","leaf":false,"cls":"folder","children":[{"text":"http:\/\/localhost\/cgi-bin\/mapserv
?map=\/home\/gis\/mapserver\/cartocomune_wms.map&SERVICE=wms&FORMAT=png&VERSION=1.1.1&LAYER=idrografia
&REQUEST=GetLegendGraphic","id":"idrografia","leaf":true,"cls":"file"}]},{"text":"viabilita","id":"via"
,"leaf":false,"cls":"folder","children":[{"text":"http:\/\/localhost\/cgi-bin\/mapserv?map=\/home
\/gis\/mapserver\/cartocomune_wms.map&SERVICE=wms&FORMAT=png&VERSION=1.1.1&LAYER=viabilita&REQUEST=GetLegendGraphic"
,"id":"viabilita","leaf":true,"cls":"file"}]},{"text":"uso_suolo","id":"uso","leaf":false,"cls":"folder"
,"children":[{"text":"http:\/\/localhost\/cgi-bin\/mapserv?map=\/home\/gis\/mapserver\/cartocomune_wms
.map&SERVICE=wms&FORMAT=png&VERSION=1.1.1&LAYER=uso_suolo&REQUEST=GetLegendGraphic","id":"uso_suolo"
,"leaf":true,"cls":"file"}]},{"text":"catasto","id":"cat","leaf":false,"cls":"folder","children":[{"text"
:"http:\/\/localhost\/cgi-bin\/mapserv?map=\/home\/gis\/mapserver\/cartocomune_wms.map&SERVICE=wms
&FORMAT=png&VERSION=1.1.1&LAYER=catasto&REQUEST=GetLegendGraphic","id":"catasto","leaf":true,"cls":"file"
}]}]

thank's Luca

Answer 1

Well, it's not clear what your issue is -- do you see image placeholders? If so, you may need to double-check that Ext.BLANK_IMAGE_URL is set correctly. If you are trying to load custom images, inspect the rendered tree nodes in Firebug -- are your image tags rendered correctly with the proper urls? Also check the Net tab in Firebug and see if you have any broken image references.

Answer 2

You need to include an "iconCls" attribute for node in your JSON that references a CSS class defining the image you want to show up for that particular node.

Per the API docs on extjs.com:

// specify the property in the config for the class: ... iconCls: 'my-icon'

// css class that specifies background image to be used as the icon image: .my-icon { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important; }

So your JSON is going to look like this:

[{"text":"comuni","id":"co","leaf":false,"cls":"folder","children":[{"text":"http:\/\/localhost\ /cgi-bin\/mapserv?map=\/home\/gis\/mapserver\/cartocomune_wms.map&SERVICE=wms&FORMAT=png&VERSION=1.1 .1&LAYER=comuni&REQUEST=GetLegendGraphic","id":"comuni","leaf":true,"cls":"file", "iconCls": "my-icon"}]},{"text":"idrografia" ,"id":"id","leaf":false,"cls":"folder", "iconCls": "my-icon"} ... etc.. etc...}]

Answer 3

Ensure your Ext.BLANK_IMAGE_URL is properly pointing at the s.gif