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

[ethraza]

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?

        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.

[yorl1n]

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.

[ethraza]

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)?

[ethraza]

Ok, just found how!

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.