Don't like ads? PRO users don't see any ads ;-)
Guest

Untitled

By: a guest on Jun 30th, 2012  |  syntax: None  |  size: 1.89 KB  |  hits: 19  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. How to display image using extjs?
  2. sb.append(System.getProperty("java.io.tmpdir"))
  3.                 .append(System.getProperty("file.separator"))
  4.                 .append("temp.jpg");
  5.         FileOutputStream fos = new FileOutputStream(sb.toString());
  6.         fos.write(myFileService.getImage.getBytes()); // it works ok
  7.         fos.close();
  8.         FileBean fb = new FileBean();
  9.         fb.setName("temp.jpg");
  10.         fb.setUrl(sb.toString());
  11.         res.put("image", fb);
  12.        
  13. var imgPanel = new Ext.Panel({
  14.  
  15.     padding: 5,
  16.     margins: '0 0 5 5',
  17.     id:'images-view',
  18.     frame:true,
  19.     collapsible:false,
  20.     layout:'fit',
  21.     items:  new Ext.DataView({
  22.         store: imgStore,
  23.         tpl: tpl,
  24.         height:200,
  25.         width: 200,
  26.         multiSelect: false,
  27.         overClass:'x-view-over',
  28.         itemSelector:'div.thumb-wrap',
  29.         emptyText: 'No images to display',
  30.         plugins: [
  31.             new Ext.DataView.DragSelector({dragSafe:true})
  32.         ],
  33.        
  34. imgStore = new Ext.data.JsonStore({
  35.  
  36.     url: '/foo',
  37.     root: 'image',
  38.     fields: [
  39.         'name', 'url'
  40.     ]
  41. });
  42.        
  43. // ImageTemplate for the Data View
  44.   var imageTemplate = new Ext.XTemplate('<tpl for=".">',
  45.       '<div class="thumb-wrap" id="{name}">',
  46.       '<div class="thumb">
  47.           <img src="/GetThumbnail/{url}" title="{name}"></div>',
  48.          '<span>{shortName}</span></div>',
  49.       '</tpl>');
  50.  
  51.         // DataView for the Gallery
  52.         var imageDataView = new Ext.DataView({
  53.             tpl: imageTemplate,
  54.             singleSelect: true,
  55.             overClass: 'x-view-over',
  56.             itemSelector: 'div.thumb-wrap',
  57.             loadingText: 'Loading Images...',
  58.             emptyText: '<div style="padding:10px;">No images</div>',
  59.             store: imageStore
  60.         });
  61.        
  62. {
  63.     title: 'Image Gallery',
  64.     height: 500,
  65.     width: 600,
  66.     id: 'img-chooser-view',
  67.     autoScroll: true,
  68.     items: imageDataView,
  69.     ...