Results 1 to 4 of 4

Thread: How to attach an Image object to a Ext.Window?

  1. #1
    Sencha Premium Member ethraza's Avatar
    Join Date
    Jun 2007
    Location
    Brazil
    Posts
    378

    Question Answered: How to attach an Image object to a Ext.Window?

    I'm trying to create a Ext Windows with the exact image size, but I can't find how to attach the Image object to the window body and after, make it resize with the window.

    Any idea?

    Code:
            var w,
                img = new Image();
            
            img.onload = function(){
                w = Ext.create('Ext.window.Window', {
                    title: obj.title,
                    constrain: true,
                    height: img.height,
                    width: img.width,
                    resizable: {preserveAspectRatio: true},
                    layout: 'fit',
                    html: img   // ???
                }).show();
            };
            
            img.src='data:image/jpeg;base64,'+obj.img;
    Thank you.
    LAMPE (Linux / Apache / MySQL / PHP / ExtJs)

  2. Hi,
    Make Ext.Img part of the window, do not provide width and height in window and it will automatically calculated. The layout of the window set to 'fit', so the only internal image will take all place. Here is example.

  3. #2
    Sencha Premium Member yorl1n's Avatar
    Join Date
    Mar 2015
    Location
    Germany
    Posts
    294
    Answers
    30

    Default

    Hi,
    Make Ext.Img part of the window, do not provide width and height in window and it will automatically calculated. The layout of the window set to 'fit', so the only internal image will take all place. Here is example.

  4. #3
    Sencha Premium Member ethraza's Avatar
    Join Date
    Jun 2007
    Location
    Brazil
    Posts
    378

    Default

    Nice! Thank you.

    But if the image is too large, and I wanna to reduce it to a specific size, lets say, 70% of the availabe height or width of the screen (depending if the image is horizontal or vertical photo). How can I manage it without knowing the image size or without a load event on Ext.Img (At least, can't see one in the docs)?
    LAMPE (Linux / Apache / MySQL / PHP / ExtJs)

  5. #4
    Sencha Premium Member ethraza's Avatar
    Join Date
    Jun 2007
    Location
    Brazil
    Posts
    378

    Wink Yeah

    Ok, just found how!

    Code:
    var ss = Ext.getBody().getViewSize();
    
    Ext.create('Ext.window.Window', {
                title: 'Title',
                constrain: true,
                resizable: {preserveRatio: true},
                maxHeight: ss.height,
                maxWidth: ss.width,
                autoShow: true,
                layout: 'fit',
                items: {
                    xtype: 'image',
                    src: 'data:image/jpeg;base64,' + obj.img
                },
                listeners: {
                    show: function(){
                        var s = this.items.items[0].getSize();
                        
                        this.setSize(s.width, s.height).center();
                    }
                }
            });
    ps. No .show() needed if we have autoShow:true.


    Thank you.
    LAMPE (Linux / Apache / MySQL / PHP / ExtJs)

Similar Threads

  1. how to attach the image?
    By sathyan_8294 in forum Sencha Touch 1.x: Q&A
    Replies: 3
    Last Post: 18 Jan 2012, 4:21 AM
  2. How to attach a extjs object function as listener to hyper link button
    By valfumble in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 18 Jan 2011, 12:22 PM
  3. Attach a dom object within the renderer...
    By crpatrick in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 4 Jan 2008, 7:50 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •