Results 1 to 2 of 2

Thread: Custom header problems

    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
    4
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

Tags for this Thread

Posting Permissions

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