Search code examples
extjs6-classic

How to align html text in panel Ext js

What is the proper way to align ExtJs panel. I have tried textAlign property but it doesn't work.

This is my code

Ext.create('Ext.panel.Panel',{
    title:'Hello World',
    width:350,
    html:'First Ext Program',
    render:'division',
})

If I run this, I can get a pretty panel with the text which is "First Ext Program". By default it is left align but I want to align it to the center or right. Can you guys please help me to solve this. Thanks in advance

Solution

  • You can use the config bodyStyle. https://docs.sencha.com/extjs/6.0.1/classic/Ext.panel.Panel.html#cfg-bodyStyle

    This should do the trick (Tested in ExtJs 6.0.1 Classic-Toolkit):

    Ext.create('Ext.panel.Panel',{
    title:'Hello World',
    width:350,
    html:'First Ext Program',
    render:'division',
    bodyStyle: 'text-align: center;'
})