Results 1 to 3 of 3

Thread: Panel title alignment bug?

  1. #1

    Default Panel title alignment bug?

    Tried searching but didn't find any reference of this.

    Using the following simple example:
    Code:
    Ext.define('MyApp.view.MyPanel', {
        extend: 'Ext.panel.Panel',
    
        height: 300,
        style: '{text-align:center;}',
        width: 200,
        title: 'My Panel',
    
        initComponent: function() {
            var me = this;
    
            me.callParent(arguments);
        }
    
    });
    It seems that in the latest v4.1.0, there is no way to make the panel title center aligned because the title element is generated with an inline style like this:
    HTML Code:
    <div style="text-align: left; left: 0px; top: 0px; margin: 0pt; width: 189px;" class="x-component x-panel-header-text-container x-box-item x-component-default" id="ext-comp-1009_header_hd"><span class="x-panel-header-text x-panel-header-text-default" id="ext-comp-1009_header_hd-textEl">My Panel</span></div>
    Notice the "text-align: left" above, it is blocking all other alignment settings since it has the highest precedence.

    If you simply change your main index.html file to point to the earlier 4.0.7 version EXT JS file, the center align works as expected.

    Seems to me this is a bug.

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409

    Default

    Please try the following:

    Code:
    Ext.create('Ext.panel.Panel', {
        title: 'Hello',
        width: 200,
        html: '<p>World!</p>',
        header: {
            titleAlign: 'center'
        },
        renderTo: Ext.getBody()
    });
    Regards,
    Scott.

  3. #3

    Default

    Code:
    Ext.create('Ext.panel.Panel', {
    
        title: 'Hello',
        width: 200,
        titleAlign: 'center',
        html: '<p>World!</p>',
        renderTo: Ext.getBody()
    });

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •