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

спасибо Лука

Answer 1

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

Согласно документации API на extjs.com:

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

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

Итак, ваш JSON будет выглядеть так:

[{"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"}... и т. д. и т. д.}}]

Answer 2

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

Answer 3

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