
Untitled
By: a guest on
Jun 30th, 2012 | syntax:
None | size: 1.89 KB | hits: 19 | expires: Never
How to display image using extjs?
sb.append(System.getProperty("java.io.tmpdir"))
.append(System.getProperty("file.separator"))
.append("temp.jpg");
FileOutputStream fos = new FileOutputStream(sb.toString());
fos.write(myFileService.getImage.getBytes()); // it works ok
fos.close();
FileBean fb = new FileBean();
fb.setName("temp.jpg");
fb.setUrl(sb.toString());
res.put("image", fb);
var imgPanel = new Ext.Panel({
padding: 5,
margins: '0 0 5 5',
id:'images-view',
frame:true,
collapsible:false,
layout:'fit',
items: new Ext.DataView({
store: imgStore,
tpl: tpl,
height:200,
width: 200,
multiSelect: false,
overClass:'x-view-over',
itemSelector:'div.thumb-wrap',
emptyText: 'No images to display',
plugins: [
new Ext.DataView.DragSelector({dragSafe:true})
],
imgStore = new Ext.data.JsonStore({
url: '/foo',
root: 'image',
fields: [
'name', 'url'
]
});
// ImageTemplate for the Data View
var imageTemplate = new Ext.XTemplate('<tpl for=".">',
'<div class="thumb-wrap" id="{name}">',
'<div class="thumb">
<img src="/GetThumbnail/{url}" title="{name}"></div>',
'<span>{shortName}</span></div>',
'</tpl>');
// DataView for the Gallery
var imageDataView = new Ext.DataView({
tpl: imageTemplate,
singleSelect: true,
overClass: 'x-view-over',
itemSelector: 'div.thumb-wrap',
loadingText: 'Loading Images...',
emptyText: '<div style="padding:10px;">No images</div>',
store: imageStore
});
{
title: 'Image Gallery',
height: 500,
width: 600,
id: 'img-chooser-view',
autoScroll: true,
items: imageDataView,
...