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值。可能是我得到了不正确的网址？如果是的话，如何让它发挥作用？我需要将我的图片保存在临时文件中，然后显示它。我认为我的问题出在服务器端。如何在我需要的网址上保存它，然后通过这个网址获取它？请帮帮我....

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

我希望这会有所帮助。你现在的代码有错误吗？

如何使用extjs显示图像？

2 个答案: