How to show image inside a full screen panel

[rbahumi]

Hi,

I am trying to add a functionality to an image, when a user taps on it - it is being opened in a full screen panel (margin of ~5% and a frame) with an 'x' button on the side which closes the panel.

Now, I am sure I have seen that implemented somewhere, either in the application examples, or in the documentation, but I can't find it now.

Does anyone know what I am talking about?
Regards,
Roei.

[mitchellsimoens]

You could open a floating panel

[rbahumi]

Well, I tried using the panel, but couldn't get the fullscreen image with 5% margin.
Tried setting 'fullscreen: true' for both img and panel - didn't work.
Tried defining the height and the width using percentage CSS (height: '90%', width: '90%') - didn't work

Attached below is the view code with a screenshot of the outcome. (it is not fullscreen...)
What am I doing wrong?

Another thing- is there a built-in feature of adding an 'X' (delete) button at the top corner of the panel?

Ext.define("Surfspace.view.ImgPanel", {
    extend: 'Ext.Panel',
    xtype: "imjpanel",
    id: 'imjpanel',


    config:{
        left: 0,
        margin: 10,
        //fullscreen: true,   //doesn't work
        items: [
            {
            xtype: 'image',
            src: 'https://surf-space.com/wp-content/uploads/spots/user_reports/1/1_1352779977.jpg',
            style: { 'background-size': '200px 200px'}, height: 200, width: 200,
            //style: { 'background-size': '90% 90%'}, height: '90%',    width: '90%', //doesn't work
            //height: '90%',    width: '90%'      //doesn't work
            //fullscreen: true,                 //doesn't work
            }
        ],
    },
});

panelImage.png

[rbahumi]

Any update on this issue?