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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi