1. #1
    Ext User
    Join Date
    Sep 2010
    Posts
    2
    Vote Rating
    0
    minlab is on a distinguished road

      0  

    Question Set a image in middle and center in a Container

    Set a image in middle and center in a Container


    Hi there,

    Would you please tell me on how to load a image and set it to 'middle' and 'center'. I was able to load it into container but couldn't position it in middle' and 'center'.

    Code:
    var c = new Ext.Container({
            layout:{
                    type:'vbox',
                    align:'middle'
            },
            width:500,
            height:400,
            html:'<img src="http://www.google.com/images/logos/ps_logo2.png"/>'
    })
    thank you

  2. #2
    Sencha User laurentParis's Avatar
    Join Date
    Aug 2010
    Location
    paris
    Posts
    246
    Vote Rating
    2
    laurentParis is on a distinguished road

      0  

    Default


    Code:
    var c = new Ext.Container({
         id: 'mycontainer',
        layout: {
            type: 'vbox',
            align: 'middle'
        },
        listeners: {
            'afterlayout': function () {
                Ext.get('myimg').alignTo('mycontainer', 'c-c');
            }
        }
        width: 500,
        height: 400,
        html: '<img id="myimg" src="http://www.google.com/images/logos/ps_logo2.png"/>'
    })
    add hidden class on your img and show it only after alignTo called

  3. #3
    Ext User
    Join Date
    Sep 2010
    Posts
    2
    Vote Rating
    0
    minlab is on a distinguished road

      0  

    Default


    laurentParis, thanks for your input. It works great, and I love EXTJS!

    I have one more question on this, I need to add an event to check the image state as well before calling alignTo method, otherwise the image won't properly be set in the container.

    for exmple: if the image is successfully loaded then call something like this...

    is it possible doing this in ExtJS? thanks

    Code:
    listeners  : {
        afterrender : function() {
            Ext.get('myimg').addListener('complete', function(){
                    Ext.get('myimg').alignTo('mycontainer', 'c-c');
            });
        }
    }

Similar Threads

  1. Replies: 1
    Last Post: 16 Nov 2011, 1:53 PM
  2. How to set the image of rowAction to the Center?
    By yagi in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 3 Aug 2010, 12:20 AM
  3. Replies: 1
    Last Post: 20 Nov 2009, 2:22 AM
  4. [SOLVED]Can I center an image in a panel?
    By StevenInc in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 10 Aug 2009, 7:18 PM
  5. How to center the image in ContentPanel?
    By andre_guitar7 in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 30 Mar 2009, 5:01 AM

Thread Participants: 1

Tags for this Thread