javascript 如何使用extjs显示图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5078578/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display image using extjs?
提问by Sergey
Im new to extjs, so need help. I've uploaded image in my db,
我是 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);
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....
我得到了很好的响应，但在重新加载商店后面板显示 emptyText 值。可能是我得到的网址不正确？如果是这样，如何使它工作？我需要将我的图片保存在临时文件中，然后显示它。我认为我的问题出在服务器端。如何将它保存在我需要的 url 中，然后通过这个 url 获取它？请帮帮我....
回答by Ajay Thakur
Follow this link may this help you alot:
按照此链接可能对您有很大帮助：
http://docs.sencha.com/extjs/6.0/6.0.1-classic/#!/api/Ext.Img
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
您可以使用默认图像 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()
});
回答by Abdel Raoof
Here is what I did for a similar requirement. I used XTemplates to display my images in data view:
这是我为类似的要求所做的。我使用 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
});
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?
我希望这有帮助。你现在的代码有什么错误吗？
