PDA

View Full Version : How to change the Grid Headers CSS



blomasky
16 Aug 2013, 12:31 PM
I have a grid with no sorting / selecting, etc. so there is NO arrow displayed on the header and want to make it REAL narrow. What I thought I should do was:

1) create a css entry that looks like:
.removeGridTrigger {
grid-header-trigger-width: 0;
grid-header-padding: 0;
}

2) add that to the Ext.AbstractComponent 'cls' property.

However, this does not do anything.

Some guidance please?

thanks
bruce

scottmartin
16 Aug 2013, 8:08 PM
You might be able to play with the header padding:



.x-column-header-inner {
padding: 3px 6px 2px; /* 3px 6px 4px; */
}

blomasky
16 Aug 2013, 8:17 PM
Being a NOOB, where would I put this? In my custom CSS, and what property of the grid (or grid view, or column) do I enter the CSS. Thanks

scottmartin
16 Aug 2013, 8:18 PM
In a css file, after ext-all.css

Phil Guerrant
19 Aug 2013, 7:29 AM
If you use the SASS API, your custom CSS will be more robust and feature proof. Using the SASS API ensures that when the framework changes the internal markup required for rendering components, your cusomizations will still work. See the theming guide for more info:

http://docs.sencha.com/extjs/#!/guide/theming

the SASS variable you're looking for is $grid-header-padding. SASS variables for each component are documented at the bottom of the class docs in the section titled "CSS Variables". For example, SASS variables for customizing grid headers found here: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.header.Container