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

您需要在JSON中为节点添加“iconCls”属性，该属性引用定义要为该特定节点显示的图像的CSS类。

根据extjs.com上的API文档：

//在配置中指定类的属性： ... iconCls：'my-icon'

// css类，指定要用作图标图像的背景图像： .my-icon {background-image：url（../ images / my-icon.gif）0 6px no-repeat！important; }

所以你的JSON看起来像这样：

[{ “文本”： “COMUNI”， “ID”： “CO”， “叶”：假 “CLS”： “文件夹”， “孩子”：[{ “文本”：“HTTP：//本地主机\ /cgi-bin/mapserv?map=/home/gis/mapserver/cartocomune_wms.map&SERVICE=wms&FORMAT=png&VERSION=1.1 .1＆amp; LAYER = comuni＆amp; 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中的渲染树节点 - 您的图像标记是否使用正确的URL正确呈现？同时检查Firebug中的Net选项卡，看看是否有任何损坏的图像引用。

Answer 3

确保Ext.BLANK_IMAGE_URL正确指向s.gif

extjs在TreePanel中加载图像

3 个答案: