How to display image using extjs?

Question

I am new to extjs, so you need help. I uploaded the image to my db,

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); 

My panel looks like in the examples.

 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}) ], 

this is a store

 imgStore = new Ext.data.JsonStore({ url: '/foo', root: 'image', fields: [ 'name', 'url' ] }); 

I get a good answer, but the panel shows the emptyText value, after rebooting the store. Maybe I get the wrong url? if so, how to make it work? I need to save my photo in a temporary file and then show it. I think my problem is server side. How do I save it at the address I need and then get it at that url? Help me pls ....

Answer 1

Follow this link, it can help you:

http://docs.sencha.com/extjs/6.0/6.0.1-classic/#!/api/Ext.Img

You can use default xtype images to display images in extjs

 var changingImage = Ext.create('Ext.Img', { src: 'http://www.sencha.com/img/20110215-feat-html5.png', width: 184, height: 90, renderTo: Ext.getBody() }); 

Answer 2

Here is what I did for a similar requirement. I used XTemplates to display images in data view:

  // 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 }); 

and in my panel I have:

 { title: 'Image Gallery', height: 500, width: 600, id: 'img-chooser-view', autoScroll: true, items: imageDataView, ... 

Hope this helps. Are you getting any errors with your current code?