[SOLVED] headerCfg child elements does not render

i have following problem,

i define a headerCfg with a child element

PHP Code:

---

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

remove the title config. It is overriding your headerCfg

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() ?

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.

okay thank you, thats what i had expected.

works like a charm :-)

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

PHP Code:

---

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 ;-)

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

Configure those methods in as config options.

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

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.