Как отобразить изображение с помощью extjs?

Question

Я новичок в 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'
    ]
});

Я получаю хорошоответ, но панель показывает значение emptyText после перезагрузки хранилища.Может быть, я получаю не правильный URL?если так, как заставить это работать?Мне нужно сохранить свою фотографию во временном файле, а затем показать ее.Я думаю, что моя проблема на стороне сервера.Как сохранить его по URL, который мне нужен, а затем получить по этому URL?Помоги мне, пожалуйста ....

Answer 1

Перейдите по этой ссылке, это может вам очень помочь:

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

Вы можете использовать изображение по умолчанию xtype для показа изображений в 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

Вот что я сделал для аналогичного требования. Я использовал XTemplates для отображения моих изображений в режиме просмотра данных:

  // 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,
    ...

Надеюсь, это поможет. Вы получаете какую-либо ошибку с вашим настоящим кодом?