Set a image in middle and center in a Container

[minlab]

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'.

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

[laurentParis]

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

[minlab]

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

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