Image of extjs loading in TreePanel

Question

I created Ext.TreePanel and I would have an image in the node, in the text of the node I have a url for the image, but I can’t load it on the page, I only see the text, is it possible 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 a TreePanel request response

[{"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 x's

Answer 1

You need to add the “iconCls” attribute for the node in your JSON, which refers to the CSS class that defines the image you want to display for that particular node.

In the API docs on extjs.com:

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

// css, , : .my-icon {background-image: url (../images/my-icon.gif) 0 6px no-repeat! important; }

, JSON :

[{ "": "comuni", "": "", "" "": "", "": [{ "": "HTTP:// \ /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 " }]}, { "": "idrografia "," id ":" id "," leaf ": false," cls ":" folder", "iconCls": "my-icon"}... .. ..... }]

Answer 2

, , : ? , Ext.BLANK_IMAGE_URL. , Firebug - ? "" Firebug , - .

Answer 3

Make sure your Ext.BLANK_IMAGE_URL correctly points to s.gif