Question

I am using ExtJS for my project.

I need to create a window in ExtJS of variable size to display an image my user has uploaded.

But, if a smaller image say 150×150 is uploaded, I want the window to “fit” the image, i.e., the window should be 150×150.

But if a larger image, say 3000×3000 is uploaded, then I want the window to be only 800×600, with the image properly resized and rendered inside it.

I want to do this in ExtJS. Here’s my code for the image viewer. Please help me find a solution here.

    viewWin = new Ext.Window({
          title : title,
    layout  : 'auto',
    width   : '50%',
       resizable: false,
    shadow  : true,
    items   : [new Ext.ux.MediaPanel({
            border  : false,
            style   : {width:'100%', height:'100%'},
            mediaCfg : {
                mediaType: 'JPEG',
                url :  url,
                }
        })]
});

Answer 1

To do so, why not use shadowbox : Shadowbox

I think it’s the simplest way, it automatically fits the user resolution and image size. It has been adapted for lot of frameworks including Ext, so if the use of such a tool is not a problem for your project, I would highly suggest so 😉