1. #1
    Sencha User
    Join Date
    Jul 2013
    Posts
    4
    Vote Rating
    0
    Gaurav90 is on a distinguished road

      0  

    Default Unanswered: Displaying images from database in a panel

    Unanswered: Displaying images from database in a panel


    how can we display images in byte from server in a panel using dataviews.
    please reply....

  2. #2
    Sencha User
    Join Date
    May 2012
    Location
    Blumenau - Brazil
    Posts
    50
    Answers
    12
    Vote Rating
    8
    julio.batista will become famous soon enough

      0  

    Default


    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)
    Code:
    <tpl for=".">
        <img src="{src}" />
    </tpl>
    If you have the binary data, you should work with blobs
    Code:
    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)
    --
    Júlio César Batista - blog - twitter
    Web Developer

  3. #3
    Sencha User
    Join Date
    Jul 2013
    Posts
    4
    Vote Rating
    0
    Gaurav90 is on a distinguished road

      0  

    Default


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

  4. #4
    Sencha User
    Join Date
    May 2012
    Location
    Blumenau - Brazil
    Posts
    50
    Answers
    12
    Vote Rating
    8
    julio.batista will become famous soon enough

      0  

    Default


    Did you need a "complete" example of how to do that, or just an abstraction of how to use the binary image?
    --
    Júlio César Batista - blog - twitter
    Web Developer

  5. #5
    Sencha User
    Join Date
    Jul 2013
    Posts
    4
    Vote Rating
    0
    Gaurav90 is on a distinguished road

      0  

    Default


    Example will be good. i will get more clarity.
    n thanks for the reply

  6. #6
    Sencha User
    Join Date
    May 2012
    Location
    Blumenau - Brazil
    Posts
    50
    Answers
    12
    Vote Rating
    8
    julio.batista will become famous soon enough

      0  

    Default


    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/

    Hope you enjoy it.
    --
    Júlio César Batista - blog - twitter
    Web Developer

  7. #7
    Sencha User
    Join Date
    Jul 2013
    Posts
    4
    Vote Rating
    0
    Gaurav90 is on a distinguished road

      0  

    Default


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

Thread Participants: 1

Tags for this Thread