1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    6
    Vote Rating
    0
    hstanciu is on a distinguished road

      0  

    Default centering text in Panel

    centering text in Panel


    Hi,

    I have troubles centering vertically and horizontally a text in a panel.
    I want the message that will appear in displayfield identified by 'msgBannerId' to be in the middle of
    the panel identified by 'bannerId'.



    buildMessageBanner : function(){
    this.messageBannerPanel = new Ext.form.FormPanel({
    renderTo : this.formConfig.renderTo,
    id : 'bannerId',
    //bodyCfg: {tag:'center', cls:'x-panel-body'},
    bodyStyle : 'background-color : #f0f0f0',
    height : 80,
    width : this.itemsWidth,
    scope :this,
    border :true,
    layout :'hbox',
    layoutConfig: {
    pack : 'center',
    align:'middle'
    },
    border : true,
    items :
    [
    {
    border : true,
    width : this.formConfig.itemsWidth,
    autoEl : {tag: 'center'},
    layout : 'form',
    labelWidth : 100,
    bodyStyle : 'background-color : #f0f0f0;',
    items :
    [
    {
    xtype : 'displayfield',
    autoHeight : true,
    fieldLabel : '',
    id : 'msgBannerId',
    cls : 'msg-success',
    hidden : true
    }
    ]
    }
    ]
    });

    }



    Thank you,
    Horatiu

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,111
    Vote Rating
    470
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    See if this works for you:

    Code:
    var htmlvalue = 'This is my text';
    
    var myPanel = new Ext.Panel({
        height: 200,
        layout: 'vbox',
        layoutConfig: {
            pack: 'center',
            align: 'center'
        },
        items: {
            xtype: 'box',
            autoEl: {cn: htmlvalue}
        },
    
        renderTo: Ext.getBody()
    });
    Regards,
    Scott.

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    6
    Vote Rating
    0
    hstanciu is on a distinguished road

      0  

    Default centering text in Panel

    centering text in Panel


    Hi Scott,

    Thanks for the answer. The text is corectly cenetered the way you explained; the problem is that I need
    to access and change dynamically the text by looking up 'msgBannerId'.

    I tried for some time to do this, but no luck until now.
    Please let me know if you have an idea.

    Regards,
    Horatiu

Thread Participants: 1

Tags for this Thread