[SOLVED] headerCfg child elements does not render

[mrsunshine]

i have following problem,

i define a headerCfg with a child element

Ext.onReady(function() {
    p = new Ext.Panel({
        title : 'title',
        renderTo : document.body,
        width : 200,
        height : 20,
        html : 'content',
        headerCfg : {
            tag : 'div',
            cls : 'x-panel-header-test',
            cn : [{
                tag : 'div',
                cls : 'x-panel-header-status',
                html : 'titlechild'
            }]
        }
    });
}); 

the element with the class "x-panel-header-test" was created but not the child div with class 'x-panel-header-status'.

Where is my error?

Does the header rendering process remove all child elements for the tititle span and tools div?

i am happy about any hints

Nils

[Animal]

remove the title config. It is overriding your headerCfg

[mrsunshine]

Thank you. That does the trick, i'll only have to render the title by my own but thats no problem.

is it possible to override the title/header after render like with setTitle() ?

[Animal]

Probably not. That method will expect the standard header DOM structure to be there to place the text into. If you have special DOM structure, you will need a special setTitle method injected into the instance as a config.

[mrsunshine]

okay thank you, thats what i had expected.

[mrsunshine]

works like a charm :-)

for those how have a similar issue, here a little example snippet

test = Ext.extend(Ext.Panel,{
    labelTitle:            'my title',
    layout:             'border',
    split:                 true,
    height:                600,
    collapsible:         true,
    headerCfg: {
        tag: 'div',
        cls: 'x-panel-header',  // Default class not applied if Custom element specified
        cn: [
            {
                tag: 'div',
                cls: 'x-panel-header-title'
            },
            {
                tag: 'div',
                cls: 'x-panel-header-icon1'
            },
            {
                tag: 'div',
                cls: 'x-panel-header-icon2'
            },
            {
                tag: 'div',
                cls: 'x-panel-header-nr'
            }
        ]
    },

...

    /**
     * On Render
     * @param {Object} ct
     * @param {Object} position
     */
    onRender: function(ct,position) {
        test.superclass.onRender.call(this,ct,position);
        this.setPanelTitle();
    },

    /**
     * Set Panel Title
     * Setzt den Titel des Panels
     */
    setPanelTitle: function(){
        this.header.child('.x-panel-header-title').update(this.labelTitle);
        this.header.child('.x-panel-header-icon1').addClass('query-typ-' + this.stateNavi1);
        this.header.child('.x-panel-header-icon2').addClass('typ-' + this.stateNavi2);
        this.header.child('.x-panel-header-nr').update(12345678);

    }

...
}); 

an other day i like extjs so much ;-)

[Animal]

No need to create a subclass if it's a one-off.

Configure those methods in as config options.

[mrsunshine]

yes off course, my example is part of a bigger subclass, i removed the parts which are not interesting in the context

[mcarter76]

You may also want to set the headerAsText config option to FALSE. This will stop the panel from nesting all of your child elements in a span tag.