Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    83
    Vote Rating
    5
    mpost is on a distinguished road

      0  

    Default Empty panel header title is always rendered

    Empty panel header title is always rendered


    REQUIRED INFORMATIONExt version tested:
    • Ext 4.1.1
    • Ext 4.1.1 rev a
    Browser versions tested against:
    • Safari 6.0.1
    • Chrome 22.0.1229.94
    DOCTYPE tested against:
    • HTML5
    Description:
    • I want to add some centered text after the title in a panel header.
    • Panel headers that use an items config always render the items before the title. Thus I need to put the title in the items config and omit the header's title config.
    • Ext is always rendering an empty header text element which throws off the layout.
    • This entire scenario makes it next to impossible to customize a panel header without copying private framework code.
    Steps to reproduce the problem:
    • Create a panel. Omit the title config.
    • Give it a header config. Omit the title config here as well.
    • In the header config, add a container to the items collection that represents the manually managed title.
    • Add another container to the items collection. Add css to center the text. Give it a flex of 1.
    The result that was expected:
    • The container with the centered text is rendered in the center of the header.
    The result that occurs instead:
    • The container with the centered text is rendered offset from the center due to the presence of an empty header text element.
    Test Case:
    PHP Code:
    ​Ext.create('Ext.Panel', {
        
    title'Example',
        
    width300,
        
    height400,
        
    renderToExt.getBody(),
        
    layout'border',
        
    defaults: {
            
    height100,
            
    width300
        
    },
        
    items: [
            {
            
    xtype'panel',
            
    region'center',
            
    //title: 'panel 1',
            
    html'panel 1',
            
    collapsibletrue,
            
    header: {
                
    defaults: {
                    
    border1,
                    
    style: {
                        
    borderColor'red',
                        
    borderStyle'solid'
                    
    }
                },
                
    items: [
                    {
                    
    xtype'container',
                    
    html'title',
                    
    cls'x-panel-header-text-container'},
                {
                    
    xtype'container',
                    
    html'<p style="text-align:center">centered text</p>',
                    
    flex1}
                ]
            }}
        ]
    });
    ​​ 

    HELPFUL INFORMATION
    See this URL for live test case:
    http://jsfiddle.net/k2puA/2/

    Debugging already done:
    • If the title config is not specified, the Header class sets it to a non-breaking space.
    • This non-breaking space is then rendered with a flex of 1, after the items collection.
    • Specifying various css classes on the manually managed title in the items collection seems to have no effect. The header class always wants to include the non-breaking space and then render it.
    Possible fix:
    • not provided
    Additional CSS used:
    • only default ext-all.css
    Operating System:
    • OS X 10.8.2
    • Windows 7 Pro SP1
    Last edited by mpost; 3 Nov 2012 at 10:08 AM. Reason: fix code formatting

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,220
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Why not use titleAlign to center some text?

    Code:
    Ext.create('Ext.panel.Panel', {
        title    : 'Example',
        width    : 300,
        height   : 400,
        renderTo : Ext.getBody(),
        layout   : 'border',
        defaults : {
            height : 100,
            width  : 300
        },
        items    : [
            {
                xtype       : 'panel',
                region      : 'center',
                title       : 'panel 1',
                titleAlign  : 'center',
                html        : 'panel 1',
                collapsible : true,
                header      : {
                    defaults : {
                        border : 1,
                        style  : {
                            borderColor : 'red',
                            borderStyle : 'solid'
                        }
                    },
                    items    : [
                        {
                            xtype : 'container',
                            html  : 'title',
                            cls   : 'x-panel-header-text-container'
                        }
                    ]
                }}
        ]
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    83
    Vote Rating
    5
    mpost is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    Why not use titleAlign to center some text?
    Two reasons:
    1. For the case where I want to center some text, I want the title to be left justified. You example is the opposite: title is centered, other text is left justified.
    2. This bug also affects cases where you want to right justify text. For example, if I want a left justified title, but want to add a right justified text. The text would need to be specified in the items config, but then it would be rendered before the title. Thus the title also has to be specified in the items config, but then the empty title automatically kicks in. This makes the right justified text appear to be centered. Example: http://jsfiddle.net/KQTfP/2/

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,953
    Vote Rating
    636
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    The panel header is a fairly unique component, similar the paging toolbar. It can accept items, but by default they are mostly configured externally by another component. As such, it makes it difficult to provide a reasonable level of flexibility without adding significant complication.

    As such, your best bet is to override initComponent and manipulate the items collection:

    Code:
    Ext.define('MyHeader', {
        extend: 'Ext.panel.Header',
    
        initComponent: function(){
            this.callParent(arguments);
            this.remove(this.titleCmp);
            delete this.titleCmp;
            // have at it!
        }
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!