Alguém trabalha/trabalhou com galeria de fotos? A dificuldade está para popular os thumbs na galeria, não está aparecendo nenhuma foto, somente a mensagem: "Nao ha imagem para ser exibida.'", acredito que possa estar havendo algum problema no datav (DataView), por favor vide abaixo o código da galeria e depois o retorno do JSON:
Galeria de Fotos:Ext.onReady(function() {
/*Início da Galeria de Fotos*/
var store = new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({
url: 'resultgaleria.action', method: 'POST'
}),
root: 'linhas',
fields: [
'name', 'urlsDosThumbs',
'name', 'urlsDasFotosOriginais',
{ name: 'idsDosThumbs', type: 'int' },
'nomesDosThumbs'
]
});
store.load();
var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap" id="{name}">',
'<div class="thumb"><img src="{urlsDosThumbs}" title="{nomesDosThumbs}" ondblclick="alert(123)"></div>',
'<span class="x-editable">{shortName}</span></div>',
'</tpl>',
'<div class="x-clear"></div>'
);
var tplDetail = new Ext.XTemplate(
'<div class="details">',
'<tpl for=".">',
'<img src="{urlsDosThumbs}"><div class="details-info">',
'<b>Nome da Foto:</b>',
'<span>{nomesDosThumbs}</span>',
'<span><a href="{urlsDasFotosOriginais}" target="_blank">Ver Foto Original</a></span></div>',
'</tpl>',
'</div>'
);
var tbar = new Ext.Toolbar({
style: 'border:1px solid #99BBE8;'
});
var datav = new Ext.DataView({
autoScroll: true, store: store, tpl: tpl,
autoHeight: false, height: 400, multiSelect: true,
overClass: 'x-view-over', itemSelector: 'div.thumb-wrap',
emptyText: 'Nao ha imagem para ser exibida.',
style: 'border:1px solid #99BBE8; border-top-width: 0',
plugins: [
new Ext.DataView.DragSelector(),
],
prepareData: function(data){
data.nomesDosThumbs = Ext.util.Format.ellipsis(data.nomesDosThumbs, 15);
return data;
},
click: {
fn: function() {
var selNode = datav.getSelectedRecords();
tplDetail.overwrite(panelRightBottom.body, selNode[0].data);
}
}
});
tbar.add('->', {
text: 'Remover Foto',
icon: 'imagens/cross.png',
handler: function() {
var records = datav.getSelectedRecords();
if (records.length != 0) {
var imgName = '';
for (var i = 0; i < records.length; i++) {
imgName = imgName + records[i].data.nomesDosThumbs + ';';
}
Ext.Ajax.request({
url: 'verImagemPeloId!excluiImagemUsandoIdImagemComoParametro.action',
method: 'post',
params: { linhas: idsDosThumbs},
success: function() {
store.load();
}
});
}
}
});
var panelLeft = new Ext.Panel({
id: 'images-view',
frame: true,
width: 550,
autoHeight: true,
layout: 'fit',
items: [tbar,datav]
});
panelLeft.render('galeriaDeFotos');
/*Fim Galeria de Fotos*/
/*Início Descrição das Fotos*/
var panelRightBottom = new Ext.Panel({
title: 'Detalhes da Foto',
frame: true,
width: 330,
height: 200,
id: 'panelDetail',
renderTo: 'detalheDaImagem',
tpl: tplDetail
});
/*Fim Descrição das Fotos*/
});
Retorno do JSON:
//resultgaleria.action
{"linhas":{"idsDosThumbs":[185],"nomesDosThumbs":["thumb_185.jpg"],"urlFotoOriginal":["verImagemPeloId!verImagemOriginal.action?pessoaImagem.idPessoaImagem=185"],"urlsDosThumbs":["D:\\ambiente-de-desenvolvimento\\Workspaces\\Java\\.metadata\\.plugins\\org.eclipse.wst.server.core\\tmp1\\wtpwebapps\\repositorioDigitalV3\\WEB-INF\\galeriaDeFotoThumbs\\thumb_185.jpg"]}}