1. #1
    Sencha User
    Join Date
    Nov 2010
    Posts
    407
    Vote Rating
    6
    gkatz is on a distinguished road

      0  

    Default Ext.Img layout confusion

    Ext.Img layout confusion


    Hi;
    i cant seem to understand how sencha decides the image size in Ext.Img when height and width is not present. in the following example code, I create a simple container that is bounded in size, within it I put a non background image. I figured the image will lay itself out within the boundaries of the parent container but this is not the case. the image expands way beyond it boundaries (on google chrome in my win 7 pc)
    can someone explain this?
    what I thought would happen is that the image would use the parent container is order to 'scale' itself down to match the width of the container and change its height in order to keep the image proportions. this is what the layout system is all about isnt it?
    BTW, in background mode the image is not even seen.
    thanks
    Code:
    var cnt = Ext.create('Ext.Container', {
        height:700,
        width:300,
        items:[
          {xtype:'img',src: 'http://upload.wikimedia.org/wikipedia/commons/0/0e/Disen_ramme_700px_width.jpg',mode:'d'}
       ]
    });
    Ext.Viewport.add(cnt);

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,642
    Vote Rating
    898
    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


    If you were to leave out mode, it will use the background image for the image and therefore you'd get zero height as the <div> doesn't check the background image for any sizing info. You would either need to give the Ext.Img a width/height or have it within a parent using some layout to manage it's size.

    Since you have mode : 'd' (anything but 'background') it will use the <img> which will then size to whatever the image is. This is unless you gave a width/height to the Ext.Img or it is within a parent with a layout where that would tell it what size to display as.

    So background mode needs to have the size set on it because background image does not tell the <div> what size to have (that is just how CSS works). For any other mode, it will default to the actual image's size. Both cases are dependent on explicitly setting width/height or having it within a parent's layout.
    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
    Nov 2010
    Posts
    407
    Vote Rating
    6
    gkatz is on a distinguished road

      0  

    Default


    thanks!
    but in the example I gave there is a parent container to the image with explicit size set...
    so why does the image still acts weird? what am I| missing?

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,642
    Vote Rating
    898
    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


    That container doesn't have a layout to tell the Ext.Img to display at certain sizes. If you don't want the Ext.Img to show outside the container's size then you need to use the overflow : hidden CSS rule on the container
    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.

  5. #5
    Sencha User
    Join Date
    Nov 2010
    Posts
    407
    Vote Rating
    6
    gkatz is on a distinguished road

      0  

    Default


    OK sorry. still confused:
    tried the following layouts on the parent container:
    - fit,hbox,vbox- did not change anything. image still expands beyond the parent container boundries.
    - card layout - worked like overflow: hidden meaning it cropped the part of the image beyond the parent container size.
    but what I thought would happen is that the image, under any layout, as a part of a layout system would set its width/height to fit the parent.
    should it not be this way?

    as a side note. when can I query a parent's width/height? on which event its always available?
    thanks.

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,642
    Vote Rating
    898
    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


    It looks like the CSS has height as 100% and width as auto which would size things correctly if the image was portrait. Changing width to 100% made it actually fit so it's just a matter of some CSS. It fact you could do

    Code:
    .x-img.x-img-image.x-layout-fit-item img {
        width : 100%;
    }
    To make any image work if it is a direct child of a fit layout.
    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.

  7. #7
    Sencha User
    Join Date
    Nov 2010
    Posts
    407
    Vote Rating
    6
    gkatz is on a distinguished road

      0  

    Default


    your suggestion worked...
    do you think something like this should be built in to the framework? I mean, one fo the goals of introducing Ext.Img was to be able to add images and have them participate in the layout system.
    thanks for the help.
    BTW, do you have a CSS solution for keeping the image proportions intact?

    EDIT: adding height: auto to the css above kept the ratio

Thread Participants: 1