PDA

View Full Version : Gallery of photo receiving JSON data



andredecotia
3 Nov 2010, 10:14 AM
I don't understand how to link from JSON to this gallery framework, I put my JSON result as Action cause
I am using Java Struts2, look at below:

/*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: 'size', type: 'float' },
{ 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: 'No images to display',
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*/



/*Início Descrição das Fotos*/

var panelRightBottom = new Ext.Panel({
title: 'Detalhes da imagem',
frame: true,
width: 330,
height: 200,
id: 'panelDetail',
renderTo: 'right-bottom',
tpl: tplDetail
});
});
/*Fim Descrição das Fotos*/

andredecotia
4 Nov 2010, 3:41 AM
any tip?




I don't understand how to link from JSON to this gallery framework, I put my JSON result as Action cause


I am using Java Struts2, look at below:


/*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: 'size', type: 'float' },
{ 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: 'No images to display',
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*/



/*Início Descrição das Fotos*/
var panelRightBottom = new Ext.Panel({
title: 'Detalhes da imagem',
frame: true,
width: 330,
height: 200,
id: 'panelDetail',
renderTo: 'right-bottom',
tpl: tplDetail
});
});
/*Fim Descrição das Fotos*/

Condor
4 Nov 2010, 3:54 AM
What is the exact problem?

What do 'resultuploaddasimagens.action' and 'verImagemPeloId!excluirImagemPorId.action' actually return?