PDA

View Full Version : Customizing the header of an Accordion



pongz79
1 Feb 2008, 7:25 AM
Hello all.
I have a problem on how to change the header style of an Accordion menu.
I've noticed with Firebug that the style that's being applied to the header of the menu is "x-panel-header" that has a background-image that i want to remove (i know that this is possible by editing the css file...), but only for the accordion and not for all the panels.
This is my menu:


xtype: "panel",
id: 'menuPanel',
width: menuPanelWidth,
height: menuPanelHeight,
x: menuPanelX,
y: menuPanelY,
bodyStyle: 'background: transparent; border-color: white;',
items: [{
layout: "accordion",
layoutConfig: {
activeOnTop: false,
animate: true,
autoWidth: true,
collapseFirst: false,
fill: true,
hideCollapseTool :true,
titleCollapse: true
},
bodyStyle: 'background: transparent;',
border: false,
items:[{
title: 'Buildings / Floors',
id: 'buildingsFloors',
autoHeight: true,
border: false,
cls: 'x-panel-headerWPS',
bodyStyle: 'background: transparent; color: white;',
html: "<table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" style=\"padding-left: 16px;\">\
<tr>\
<td width=\"32\">\
<img src=\"images/icons/building.png\" align=\"absmiddle\" hspace=\"16\" vspace=\"4\" />\
<br />\
</td>\
<td id=\"buildingsLink\" style=\"font-family: Verdana; font-size: 11px;\">\
<a href=\"#\">Choose Building/Floor/Room</a>\
</td>\
</tr>\
</table>"
}, {
title: 'Monitor',
autoHeight: true,
bodyStyle: 'background: transparent; color: white;',
html: "<table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" style=\"padding-right: 16px;\">\
<tr>\
<td width=\"32\">\
<img src=\"images/icons/television.png\" align=\"absmiddle\" hspace=\"16\" vspace=\"4\" />\
</td>\
<td id=\"allLink\" style=\"background-image: url(images/skins/pontilhado.gif); background-repeat: repeat-x; background-attachment: scroll; background-position: 0px 23px; font-family: Verdana; font-size: 11px;\">\
<a href=\"#\">All Devices</a>\
</td>\
</tr>\
<tr>\
<td width=\"32\">\
<img src=\"images/icons/user.png\" align=\"absmiddle\" hspace=\"16\" vspace=\"4\" />\
</td>\
<td id=\"userAssetLink\" style=\"background-image: url(images/skins/pontilhado.gif); background-repeat: repeat-x; background-attachment: scroll; background-position: 0px 23px; font-family: Verdana; font-size: 11px;\">\
<a href=\"#\">User/Asset</a>\
</td>\
</tr>\
<tr>\
<td width=\"32\">\
<img src=\"images/icons/group.png\" align=\"absmiddle\" hspace=\"16\" vspace=\"4\" />\
</td>\
<td id=\"groupLink\" style=\"background-image: url(images/skins/pontilhado.gif); background-repeat: repeat-x; background-attachment: scroll; background-position: 0px 23px; font-family: Verdana; font-size: 11px;\">\
<a href=\"#\">Group</a>\
</td>\
</tr>\
<tr>\
<td width=\"32\">\
<img src=\"images/icons/house.png\" align=\"absmiddle\" hspace=\"16\" vspace=\"4\" />\
<br />\
</td>\
<td id=\"departmentUnitLink\" style=\"font-family: Verdana; font-size: 11px;\">\
<a href=\"#\">Department/Unit</a>\
</td>\
</tr>\
</table>"
},{
title: 'Reports',
autoHeight: true,
border: false,
bodyStyle: 'background: transparent; color: white;',
html: "<table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" style=\"padding-left: 16px;\">\
<tr>\
<td width=\"32\">\
<img src=\"images/icons/report_user.png\" align=\"absmiddle\" hspace=\"16\" vspace=\"4\" />\
</td>\
<td id=\"userHistoryLink\" style=\"background-image: url(images/skins/pontilhado.gif); background-repeat: repeat-x; background-attachment: scroll; background-position: 0px 23px; font-family: Verdana; font-size: 11px;\">\
<a href=\"#\">User History</a>\
</td>\
</tr>\
<tr>\
<td width=\"32\">\
<img src=\"images/icons/report.png\" align=\"absmiddle\" hspace=\"16\" vspace=\"4\" />\
</td>\
<td id=\"groupHistoryLink\" style=\"background-image: url(images/skins/pontilhado.gif); background-repeat: repeat-x; background-attachment: scroll; background-position: 0px 23px; font-family: Verdana; font-size: 11px;\">\
<a href=\"#\">Group History</a>\
</td>\
</tr>\
<tr>\
<td width=\"32\">\
<img src=\"images/icons/report.png\" align=\"absmiddle\" hspace=\"16\" vspace=\"4\" />\
</td>\
<td id=\"departmentHistoryLink\" style=\"font-family: Verdana; font-size: 11px;\">\
<a href=\"#\">Department History</a>\
</td>\
</tr>\
</table>"
}]
}]

Notice that i added a custom style (x-panel-headerWPS) to the "Buildings/Floors" item of the accordion but that is being overwritten by the x-panel-header that is provided with the framework.
I've already busted my head with this, looked and overlooked the forum and the API... :(
Any idea on how to do this?

Best reguards,
Tiago Oliveira

PS: ~o)

Condor
2 Feb 2008, 4:52 AM
Accordion also applies the x-accordion-hd class to the header. You could use:


x-accordion-hd{background-image:none!important;}

pongz79
4 Feb 2008, 1:37 AM
@Condor:
Thanks for your reply.
That will afect all the panels that exist on the application.
I found a workaround that works, but might not be the best solution for the problem.
Here's the workaround:


document.getElementById("buildingsFloors").firstChild.style.backgroundImage = "none;"; document.getElementById("monitor").firstChild.style.backgroundImage = "none;";
document.getElementById("reports").firstChild.style.backgroundImage = "none;";

Best reguards,
Tiago Oliveira

Condor
4 Feb 2008, 3:17 AM
Add cls:'no-background-image' to the container and use:


.no-background-image .x-accordion-hd{background-image:none!important;}

pongz79
4 Feb 2008, 6:39 AM
Thanks.
I'll try that.

Best reguards,
Tiago Oliveira