1. #1
    Sencha User
    Join Date
    Aug 2011
    Location
    Cincinnati, OH
    Posts
    8
    Vote Rating
    0
    npenny is on a distinguished road

      0  

    Default Centered Issues

    Centered Issues


    I'm trying to display a large image so that it scales down to the height and width of the Container it resides in. This Container is being instantiated in my Viewport, which is a TabPanel.

    Code:
    Ext.define('App.view.ImagePage', {
        extend: 'Ext.Container',
        alias: 'widget.imagepage',
    
        config: {
            style: 'background:url("resources/bg-image.jpg")'
        },
    
        initialize: function() {
            var imagePanel = Ext.create('Ext.Panel', {
                centered: true,
                html: '<img src="resources/imagepage/image.jpg" />'
            });
            this.setItems(imagePanel);
            console.log('View/ImagePage: Initialized')
        }
    });
    I've attached pictures if you'd like to see. My two problems are:

    1.) Why do I have this space across the bottom of my floating image? It's almost as if there is a padding/margin issue. You can also see the problem if you use 'Ext.Img' instead of 'Ext.Panel':
    Code:
    var imagePanel = Ext.create('Ext.Img', {
        centered: true,
        mode: 'image',
        style: 'border:5px solid black;',
        src: 'resources/imagepage/image.jpg',
    });
    2.) Also, more importantly, why does using 'centered' align, center and scale the panel perfectly horizontally but NOT vertically? It doesn't seem to scale down when the image's vertical size exceeds the Container's. It does recognize the top edge, but not the bottom. Scrolling is not turned on anywhere. Using 'Ext.Img' instead of 'Ext.Panel' behaves identically.

    Please help. I have tried many different styling solutions, but can't seem to get it perfect. If anyone has a recommendation I'm all ears.
    Last edited by npenny; 13 Jun 2012 at 3:59 PM. Reason: Additional info in Problem 2.

  2. #2
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Omaha, NE
    Posts
    556
    Vote Rating
    25
    estesbubba will become famous soon enough estesbubba will become famous soon enough

      1  

    Default


    I would just make it a component and control it via CSS

    Code:
    {
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-size:contain;
    }
    

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Location
    Cincinnati, OH
    Posts
    8
    Vote Rating
    0
    npenny is on a distinguished road

      0  

    Default


    I've tried using 'background-image', but the Panel doesn't find the image dimensions when initialized, so it only shows up as a black dot in the center of the screen. The image does show up when I set an explicit height and width for the Panel, but that defeats what I'm trying to accomplish which is to display the image in an overlay that is sized to the image.
    Attached Images

  4. #4
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Omaha, NE
    Posts
    556
    Vote Rating
    25
    estesbubba will become famous soon enough estesbubba will become famous soon enough

      1  

    Default


    I've done this in a tab panel before with success. You have a panel nested inside a container which you should avoid. Make your panel with the image a component.

    Code:
    .c-panel-background {
        background-image: url('../images/Background.png') !important;
        background-color: #003272;
        background-size: cover;
    }
    
    
    .c-tabpanel {
        @extend .c-panel-background;
    
    
        .x-layout-card-item, .x-form .x-scroll-container {
            background: transparent;
        }
    }

  5. #5
    Sencha User
    Join Date
    Aug 2011
    Location
    Cincinnati, OH
    Posts
    8
    Vote Rating
    0
    npenny is on a distinguished road

      0  

    Default


    I'm not sure where your css goes, but I have a further complication related to the Panel the image resides in.

    Each image will be dynamic, because this particular Container (what I've called 'ImagePage') is the detail view pushed from a Navigation View List. Each item on the list loads a different image into this detail view. Also, there need to be buttons attached to the image at particular coordinates on the image, to account for different screen sizes and orientations; I do this by assigning a 'top' and 'left' to each button. (pic attached). The only way I know how to do this is to put them into a Panel or a Container as items.

    I am only prototyping my app at the moment, so that is why I'm writing everything inline rather than in my controller.
    Attached Images

  6. #6
    Sencha User
    Join Date
    Aug 2011
    Location
    Cincinnati, OH
    Posts
    8
    Vote Rating
    0
    npenny is on a distinguished road

      0  

    Default


    Bump. Anybody?

Thread Participants: 1

Tags for this Thread