Hybrid View

    Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-7205 in 4.1.4.
  1. #1
    Sencha User castitas's Avatar
    Join Date
    Sep 2011
    Location
    US
    Posts
    116
    Vote Rating
    3
    castitas is on a distinguished road

      0  

    Default Custom header problems

    Custom header problems


    REQUIRED INFORMATION
    Ext version tested:
    • Ext 4.1.1 rev ?
    Browser versions tested against:
    • FF15 (firebug 1.9.1 installed)
    Description:
    • I don't know if this counts as a bug, but it is doesn't follow intuition.
      There are three problems.
      When creating a custom header using the header config in a panel,
    1. if "title" is not defined on the panel, the header is just the config object passed in, even with "title" defined in the header.
    2. header buttons appear to the left of the title (this isn't a bug, I just don't know a work-around)
    3. the title defined on the header will override the one on the panel.
    Steps to reproduce the problem:
    • Create a panel with a custom header
    Code:
    initComponent: function() {      
        Ext.apply(this, {
            height: 350,
            width: 400,
            header: {
                xtype: 'header',
                title: "HEADER"
            },
            title: "PANEL", //comment this out
        }
    }
    • Comment out "title" on the panel and refresh.
    The result that was expected:
    • A header
    The result that occurs instead:
    • The header didn't appear
    • Error: "header.hide is not a function"
    • If you step into the code, you'll see that the header is only an object
    HELPFUL INFORMATION
    Possible fix:
    I've bolded where problem #1 is. As you can see, if "title" (the panel's title) is defined, no problem.
    However, if you define the title on the header, then it fails the check at &A.
    Code:
    updateHeader: function(force) {
        var me = this, //me is the panel
            header = me.header,
            title = me.title, //The panel's title
            tools = me.tools,
            icon = me.icon || me.iconCls,
            vertical = me.headerPosition == 'left' || me.headerPosition == 'right';
    
        //&A The check fails here...
        if ( (header !== false) && (force || (title || icon) 
                                    || (tools && tools.length) 
                                    || (me.collapsible && !me.titleCollapse))) {
            if (header && header.isHeader) {
                header.show();
            } else {
                // Apply the header property to the header config
                header = me.header = Ext.widget(Ext.apply({
                    xtype       : 'header',
                    title       : title,
                    titleAlign  : me.titleAlign,
                    ...  
                    ... //configs
                }, me.header));
                me.addDocked(header, 0);
    
                // Reference the Header's tool array.
                // Header injects named references.
                me.tools = header.tools;
            }
            me.initHeaderAria();
        } else if (header) {
            header.hide();  //at this point header is just an object
        }
    },
    It doesn't check for the header's title. If it did, it could work.

    Additional CSS used:
    • only default ext-all.css
    • custom css (include details)
    Operating System:
    • Solaris 10
    word

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,548
    Vote Rating
    873
    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


    Couple thoughts...

    You technically should only specify title either on the panel or on the header config not both. If anything it will save a line of code.

    How does the framework know which you actually want to use? IMO the title in the header config should be used where as you are saying the one on the panel should be used.

    I do agree that this is a bug:

    Code:
    Ext.define('MyPanel', {
        extend : 'Ext.panel.Panel',
        xtype  : 'mypanel',
    
        initComponent : function() {
            Ext.apply(this, {
                header : {
                    xtype : 'header',
                    title : 'HEADER'
                }
            });
    
            this.callParent();
        }
    });
    I'm not sure what you mean by: "header buttons appear to the left of the title (this isn't a bug, I just don't know a work-around)"
    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.

Thread Participants: 1

Tags for this Thread