PDA

View Full Version : Displaying images from database in a panel



Gaurav90
12 Jul 2013, 2:02 AM
how can we display images in byte from server in a panel using dataviews.
please reply....

julio.batista
12 Jul 2013, 3:01 AM
If you have the image's path, hust use a template, something like this
(http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.XTemplate)


<tpl for=".">
<img src="{src}" />
</tpl>


If you have the binary data, you should work with blobs


var img = new Blob(imageData, {type: 'image/png'});
var url = window.URL.createObjectURL(img);
yourImage.src = url;

var obj = new Blob(['teste'], {type: 'image/png'});
window.URL.createObjectURL(obj)
var obj = new Blob(['teste'], {type: 'image/png'});
window.URL.createObjectURL(obj)

Gaurav90
13 Jul 2013, 6:47 AM
Thanks for the reply, but i am new to extjs and i finding some difficulty to handle this.<br><br>Actually my scenario is like that-<br>i am fetching image(in byte) from server using ajax proxy and saving that image data in datastore, and i am using the store in Dataview and the dataview i am passing to panel, where i have to show images.<br>so can any one tell me how i convert that byte image data into image and pass to Xtemplate tpl tag.<br>please reply....

julio.batista
15 Jul 2013, 3:10 AM
Did you need a "complete" example of how to do that, or just an abstraction of how to use the binary image?

Gaurav90
15 Jul 2013, 5:10 AM
Example will be good. i will get more clarity.
n thanks for the reply

julio.batista
18 Jul 2013, 8:08 AM
Hey, sorry for the late response. I wrote an example about it on my blog, it's in portuguese and I think it should help, or at least guide you to some answer.
This is the post link http://ejuliobatista.wordpress.com/2013/07/18/requisicao-com-retorno-binario-em-extjs/

(http://ejuliobatista.wordpress.com/2013/07/18/requisicao-com-retorno-binario-em-extjs/)Hope you enjoy it.

Gaurav90
22 Jul 2013, 2:23 AM
thanks for your help..

Below is the code i have created for this purpose .
I am getting image data in form of byte in a json string from server and iam storing it to Data store, and in load () method of data store i am converting that imagedata in base64 format using base64convert(str) function and again change the value at store and perform commit operation. but in case of IE browser the function base64convert() is not able to convert byte string to base64 string ,else in other browsers its working fine.


So can u tell where i am doing wrong..

var myStore = new Ext.data.Store({
// model: 'User',
storeId:'imagestore',

fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'price', type: 'int'},
{name: 'reviews', type: 'string'},
{name: 'imagedata', type: 'string'},
{name: 'imagetype', type: 'string'}

],
proxy:{
id:'prox',
type:'ajax',
url:'http://localhost:8080/Template/Server1.jsp' ,
extraParams: {
user_id: 'firstrequest'

// add as many as you need
} ,
reader:{
type:'json',
root:'data',
headers: { 'Content-Type': 'application/json; charset=UTF-8' }

}

////,
//writer: {type: 'json', root: 'records'}

}
,
listeners: {
load: function(store, records, successful){
function base64convert(str)
{
return btoa(String.fromCharCode.apply(null, str.replace(/\r|\n/g, "").replace(/([\da-fA-F]{2}) ?/g, "0x$1 ").replace(/ +$/, "").split(" "))); //(in this line IE creating problem)
}
var imagedatafrmserver;
var localdata;
var f;
for(var i=0;i<store.getTotalCount();i++){
//alert(records[i].get('imagedata'));
imagedatafrmserver=records[i].get('imagedata')
localdata=base64convert(imagedatafrmserver)
f=store.getAt(i)
f.set('imagedata',localdata);
store.commitChanges();
}

}
},

autoLoad: true
});