Wait! Looks like we don't have enough information to add this to bug database. Please follow this template bug format.
  1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    2
    Vote Rating
    0
    nEyal is on a distinguished road

      0  

    Default Can't center an Ext.Image

    Can't center an Ext.Image


    Hi -

    I'm writing a Sencha Touch app, using both Chrome 16, an iPad 2, iOS 5 & Android 2.2 phone.

    I've started porting my ST 1.1 app to ST 2, PR 3, and am happy to see Ext.Image has been added.

    I want to center an image in a panel, but this code just doesn't set the image to the center:

    xtype: 'panel',
    layout: {
    type: 'hbox',
    align: 'middle',
    pack: 'center'
    },
    items : [{ xtype : 'image', src : 'resources/images/selection/1.png'}]

    When I change the image to be a simple html img tag, it works. Like this:
    xtype: 'panel',
    layout: {
    type: 'hbox',
    align: 'middle',
    pack: 'center'
    },
    items : [{ html : '<img src=resources/images/selection/1.png' />}]


    In addition, I noticed that whenever I put an image in an h/vbox, it must have a flex defined, otherwise it's not displayed.
    Searching the forum, I've found this bug, which what I'm seeing might be a duplicate:
    http://www.sencha.com/forum/showthread.php?160837-Image-in-PR3-cannot-set-width-or-height&highlight=image

    For now I'll just use the img html tag, but I'd be happy to hear if this is known bug, and when will it get fixed. I'd rather use the ST object, rather than fill in the html.

    Thanks,
    Eyal

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


    Did you inspect the DOM? In PR3, I am seeing the <div> there but with no height. Checking on our latest internal code, width/height are now setting the size properly. In a box layout, you have to set the sizing with flex, width, and/or height.
    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
    Dec 2011
    Posts
    2
    Vote Rating
    0
    nEyal is on a distinguished road

      0  

    Default


    Thank you Mitchell,

    My issue is not with the h/vbox / flex problem - I thought it might be related.

    My issue is with not being able to center an Ext.Image, but using the html img tag centers perfectly.

    I've looked into the DOM, but I'm no expert.

    I suspect this is either a bug or a missing feature from Ext.Image.

    Eyal

  4. #4
    Sencha - Sencha Touch Dev Team Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    21
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Can you provide a test case as to what you are trying to do so we can get a better understanding of the issue?

    Sencha Inc

    Jamie Avins

    @jamieavins

Thread Participants: 2

Tags for this Thread