如何使用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'
    ]
});

我得到了很好的响应，但面板显示空文本值，在重新加载存储后。也许我的URL不正确？如果是这样，如何使它工作？我需要将我的图片保存在临时文件中，然后再显示它。我认为我的问题出在服务器端。如何将其保存在我需要的URL上，然后通过此URL获取它？请帮助我...

- Sergey

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

- Ajay Thakur

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

希望这可以帮到你。你现在的代码有任何错误吗？

- Abdel Raoof Olakara