1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    104
    Vote Rating
    0
    rbahumi is on a distinguished road

      0  

    Default Unanswered: How to show image inside a full screen panel

    Unanswered: How to show image inside a full screen panel


    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.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,641
    Vote Rating
    898
    Answers
    3573
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You could open a floating panel
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    104
    Vote Rating
    0
    rbahumi is on a distinguished road

      0  

    Default


    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?


    Code:
    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

  4. #4
    Sencha User
    Join Date
    Sep 2012
    Posts
    104
    Vote Rating
    0
    rbahumi is on a distinguished road

      0  

    Default


    Any update on this issue?

Thread Participants: 1