extjs laden Bild in TreePanel

Question

ich erstellt ein Ext.TreePanel und ich hätte in dem Knoten ein Bild, im Text des Knotens habe ich die URL zum Bild, aber ich kann es nicht in der Seite laden, ich sehe nur der Text, gibt es die Möglichkeit, das Bild zu sehen?

dies ist mein 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, 
}); 

und dies ist die Antwort des TreePanel Anfrage

[{"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" 
}]}] 

der danken Luca

Answer 1

Nun, es ist nicht klar, was das Problem ist - do Sie sehen Bildplatzhalter? Wenn dies der Fall ist, müssen Sie möglicherweise überprüfen, ob Ext.BLANK_IMAGE_URL richtig eingestellt ist. Wenn Sie versuchen, benutzerdefinierte Bilder zu laden, überprüfen Sie die gerenderten Baumknoten in Firebug. Sind Ihre Bild-Tags korrekt mit den richtigen URLs gerendert? Überprüfen Sie auch die Registerkarte "Netz" in Firebug und sehen Sie nach, ob Sie fehlerhafte Bildreferenzen haben.

Answer 2

Sie müssen ein "iconCls" -Attribut für Knoten in Ihrem JSON einfügen, das auf eine CSS-Klasse verweist, die das Bild definiert, das für diesen bestimmten Knoten angezeigt werden soll.

Pro die API-Dokumentation auf extjs.com:

// die Eigenschaft in der Config für die Klasse angeben: ... iconCls: 'my-Symbol'

// CSS-Klasse, gibt das Hintergrundbild an, das als Symbolbild verwendet werden soll: .my-icon {background-image: url (../ images/my-icon.gif) 0 6px keine Wiederholung wichtig; }

So Ihre JSON wie folgt aussehen wird:

[{ "text": "comuni", "id": "co", "Blatt": false, "cls": "Ordner" , "Kinder": [{"Text": "http: // localhost \ /cgi-bin/mapserv?map=/home/gis/mapserver/cartocomune_wms.map & SERVICE = wms & FORMAT = png & VERSION = 1.1 .1 & LAYER = comuni & ANFRAGE = GetLegendGraphic "," id ":" comuni "," blatt ": true," cls ":" datei ", " iconCls ":" my-icon "}]}, {"text": "idrografia" , "id": "id", "blatt": false, "cls": "ordner", "IconCls": "my-Symbol"} ... etc .. etc ...}]

Answer 3

Stellen Sie sicher, Ihre Ext.BLANK_IMAGE_URL ordnungsgemäß am s.gif zeigt