How to display image using extjs?

Question

Im new to extjs, so need help. I've uploaded image in 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 as in 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 store

imgStore = new Ext.data.JsonStore({

    url: '/foo',
    root: 'image',
    fields: [
        'name', 'url'
    ]
});

i get good response, but panel shows emptyText value, after store is reloaded. May be I get not correct url? if so, how to make it work? I need to save my picture in temp file, and then to show it. I think my problem is at server side. How to save it at url i need, and then to get it by this url? Help me pls....

Answer 1

Follow this link may this help you alot:

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

You can use default image xtype for showing 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 my 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,
    ...

I hope this helps. Do you get any error with your present code?