centering text in Panel

[hstanciu]

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

[scottmartin]

See if this works for you:

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.

[hstanciu]

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