Threaded View

    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
    81
    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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar