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
    Vote Rating

    Default Custom header problems

    Ext version tested:

    • Ext 4.1.1 rev ?

    Browser versions tested against:
    • FF15 (firebug 1.9.1 installed)

    • 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

    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

    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.
    updateHeader: function(force) {
        var me = this, //me is the panel
            header = me.header,
            title = me.title, //The panel's title
            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) {
            } 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.
        } 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

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL
    Vote Rating


    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:

    Ext.define('MyPanel', {
        extend : 'Ext.panel.Panel',
        xtype  : 'mypanel',
        initComponent : function() {
            Ext.apply(this, {
                header : {
                    xtype : 'header',
                    title : 'HEADER'
    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
    Modus Create, Senior Frontend Engineer
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:

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