Alguém conhece EXTjs? Digo, como fazer ele conversar com JSON? Minha Action q pega o retorno do JSON é resultuploaddasimagens.action
a questão é q estou tendo dificuldades para fazer com q as fotos sejam populadas no EXTjs, a camada Java já está implementada e funcionando…
Sendo mais específico, abaixo “fields:” como link ele com o JSON?
/*Início da Galeria de Fotos*/
var store = new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({
url: 'resultuploaddasimagens.action', method: 'POST'
}),
root: 'linhas',
fields: [
// 'name', 'url',
{ name: 'url', type: 'string' }
// { name: 'lastmod', type: 'date', dateFormat: 'timestamp' },
// 'thumb_url'
]
});
store.load();
var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap" id="{name}">',
'<div class="thumb"><img src="{thumb_url}" title="{name}"></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="{thumb_url}"><div class="details-info">',
'<b>Image Name:</b>',
'<span>{name}</span>',
'<b>Size:</b>',
'<span>{sizeString}</span>',
'<b>Last Modified:</b>',
'<span>{dateString}</span>',
'<span><a href="{url}" target="_blank">view original</a></span></div>',
'</tpl>',
'</div>'
);
var tbar = new Ext.Toolbar({
style: 'border:1px solid #99BBE8;'
});
tbar.add('->', {
text: 'Delete',
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.name + ';';
}
Ext.Ajax.request({
url: 'verImagemPeloId!excluirImagemPorId.action',
method: 'post',
params: { images: idImagem},
success: function() {
store.load();
}
});
}
}
});
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: 'Não há imagem para ser exibida.',
style: 'border:1px solid #99BBE8; border-top-width: 0',
// plugins: [
// new Ext.DataView.DragSelector(),
// ],
/*
prepareData: function(data){
data.shortName = Ext.util.Format.ellipsis(data.name, 15);
data.sizeString = Ext.util.Format.fileSize(data.size);
data.dateString = data.lastmod.format("m/d/Y g:i a");
return data;
},*/
click: {
fn: function() {
var selNode = datav.getSelectedRecords();
tplDetail.overwrite(panelRightBottom.body, selNode[0].data);
}
}
});
var panelLeft = new Ext.Panel({
id: 'images-view',
frame: true,
width: 550,
autoHeight: true,
layout: 'fit',
items: [tbar,datav]
});
panelLeft.render('left')
/*Fim Galeria de Fotos*/