ExtJS 3 -- Always Show menu icon in GridPanel Column Header?

0
votes

I have a requirement to always show the menu icon in a a GridPanel's column header. See attached image. I've tracked down the css class and see the <td /> tag is assigned the x-grid3-hd-btn on hover. The x-grid3-hd-btn class uses a background image, grid3-hd-btn.gif to display the drop-down arrow I want, but I'm not css savvy enough to figure out how to always show it.

enter image description here

There doesn't seem to be a hook in the GridPanel class api's to always display this, wish there was. Also, note that I only want the arrow icon to show, I don't want the column header to change color, etc.

Does anyone have any guidance on this?

Thanks!

John

2
extjs3gridpanel

2 Answers

4
votes

Add this to your stylesheet, this overwrites default extjs theme styles

/**
 * EXTJS Grid-3 Always visible header buttons
 */

.x-grid3-hd-btn {
display: block !important;
height: 22px !important;
}

.x-grid3-hd {
cursor: pointer;
}
0
votes

have you tried replacing the css class background image in your ext-all.css file?

original:

.x-grid3-header{
    background-color:#f9f9f9;
    background-image:url(../images/default/grid/grid3-hrow.gif);
}

replace to :

.x-grid3-header{
    background-color:#f9f9f9;
    background-image:url(../images/default/grid/grid3-hrow-over.gif);
}

tell me if that did it...