View Full Version : How to hide column header on GridPanel

14 Jan 2011, 9:05 AM
Hi, updated this due to new findings,

After looking through the API at the column model, I wasn't able to find a way to hide the column header completely. what I did find was by leaving the header string blank in the column for the column model the header would be reduced to about 5px high (see image attatched). I'm stil curious if there would be a way to hide the column header altogether? Now I have the title back so at least I don't need to worry about the cursor change anymore, hence the update.




I have a grid that I've created that's draggable, I had to hide the column header or the grid header, so I found it easiest to hide the grid header (enableHdMenu:false). I set enableColumnMove:false so that I could still drag the grid around by using the column header.

This all works, its just there's one minor snag, which is how the cursor displays when I mouse over the column header. Instead of the cross hair, which would clearly denote to the user the object is draggable, (in IE) you get a normal arrow pointer, then after the drag a text cursor.

I'm trying to keep out of the css (to allow easier code maintanence), is there a Extjs attribute to allow cursor change?

my options (I'm aware of) are;

(i)Hide the column header using css override (not nice - my grid ids may be subject to change, which would mean updating the css for each new grid added - and I'm trying not to alter the Extjs css or override unless no other options presents itself for the sake of code maintanence)

(ii)Make the cursor change using css override (override all .x-grid3-hd-row?)

(iii)insert the css to the grid through the javascript in the app.js

If anyone has any thoughts or insight let me know