Results 1 to 4 of 4

Thread: Can't center an Ext.Image

    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
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,326
    Vote Rating
    1297
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    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
      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 User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    19
      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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •