PDA

View Full Version : Panel header. How change?



fenuk
7 Nov 2010, 2:01 PM
For example, I want to change the Panel header - change style, add a picture or other HTML tags.
Where do I start? What is my first step?
I found the Panel property headerCfg. I'm on the right track?

Here is what I got to do:


new Ext.Panel({
title : 'Panel',
region : 'west',
width : 200,
headerCfg: {
tag: 'img',
src: './resources/images/1.gif'
}
})


In this example, I see a changed header.

but...


new Ext.Panel({
title : 'Panel',
region : 'west',
width :200,
headerCfg: {
tag: 'div',
cls: 'x-panel-header',
cn: [
{
tag: 'img',
src: './resources/images/1.gif'
}
]},
})


I see default header, but not see <img>... what wrong?

lucia_mgv
10 Nov 2010, 1:26 AM
I have the same problem. have you found anything?

Animal
10 Nov 2010, 1:47 AM
Have you debugged?

Condor
10 Nov 2010, 2:20 AM
The header title replaces the header content by default. You need to use:

new Ext.Panel({
//title: 'Panel', <- Moved to headerCfg
region: 'west',
width: 200,
headerAsText: false,
headerCfg: {
tag: 'div',
cls: 'x-panel-header',
cn: [{
tag: 'img',
src: './resources/images/1.gif'
},{
// Optional, if you also want a title
tag: 'span',
cls: 'x-panel-header-text',
cn: 'Panel'
}]
}
})