extjs загрузить изображение в TreePanel

Question

Я создал Ext.TreePanel, и я бы имел в узле изображение, в тексте узла у меня есть url для изображения, но я не могу загрузить его на странице, я вижу только текст, есть возможность просмотреть изображение?

это мой код

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

и это ответ на просьбу TreePanel

[{"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 в Лука

Answer 1

Ну, это не ясно, что ваш вопрос - делать вы видите место для размещения изображений? Если это так, вам может потребоваться дважды проверить правильность установки Ext.BLANK_IMAGE_URL. Если вы пытаетесь загрузить пользовательские изображения, просмотрите отображаемые узлы дерева в Firebug - правильно ли отображаются ваши теги изображений с правильными адресами? Также проверьте вкладку Net в Firebug и посмотрите, есть ли у вас какие-либо сломанные ссылки на изображения.

Answer 2

Вам необходимо включить атрибут «iconCls» для узла в вашем JSON, который ссылается на класс CSS, определяющий образ, который вы хотите отобразить для этого конкретного узла.

согласно API Документов на extjs.com:

// указать свойство в конфигурации для класса: ... iconCls: 'моя-значок' класс

// CSS, что указывает фоновое изображение, которое будет использоваться в качестве изображения значка: .my-icon {background-image: url (../ images/my-icon.gif) 0 6px no-repeat! important; }

Так что ваш JSON будет выглядеть следующим образом:

[{ "текст": "comuni", "идентификатор": "со", "лист" ложь "ЦБС": "папка" , "children": [{"text": "http: // localhost \ /cgi-bin/mapserv?map=/home/gis/mapserver/cartocomune_wms.map & SERVICE = wms & FORMAT = png & VERSION = 1.1 0,1 & LAYER = comuni & REQUEST = GetLegendGraphic», "идентификатор": "comuni", "лист": правда, "ЦБС": "Файл", "iconCls": "моя-значок"}]}, {"text": "idrografia" , "id": "id", "leaf": false, "cls": "folder", "iconCls": "моя-значок"} ... и т.д .. и т.д ...}]

Answer 3

Убедитесь, что ваш Ext.BLANK_IMAGE_URL правильно указывая на S.gif