PDA

View Full Version : [SOLVED] headerCfg child elements does not render



mrsunshine
23 Sep 2009, 3:35 AM
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
23 Sep 2009, 4:09 AM
remove the title config. It is overriding your headerCfg

mrsunshine
23 Sep 2009, 4:20 AM
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
23 Sep 2009, 4:37 AM
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
23 Sep 2009, 4:40 AM
okay thank you, thats what i had expected.

mrsunshine
23 Sep 2009, 5:07 AM
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
23 Sep 2009, 6:09 AM
No need to create a subclass if it's a one-off.

Configure those methods in as config options.

mrsunshine
23 Sep 2009, 6:19 AM
yes off course, my example is part of a bigger subclass, i removed the parts which are not interesting in the context

mcarter76
7 Nov 2012, 4:01 PM
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.