ExtJS 4.1 How to change grid panel header height

Question

I want to change the Ext.grid.Panel header height.

The height of a grid panel header is forcibly set at 28px.

1. No sass settings
2. Header configuration on the panel did not work for me
3. Modifying the grid columns height seems to work when configuring < 28px. 28px seems to be the minimum.

This is what I have so far (and it works), but I don't like the solution.

Ext.define('Ext.grid.Panel', {
    listeners: {
        beforerender: function (cmp, eOpts) {
            cmp.headerCt.setHeight(25);
        }
    }
});

Additionally, column headers seem to be fixed at 28px as well. Setting the height of the header to 25 will not set the column header to 25. You need to override that as well in the scss / css. Otherwise your column header menus will display off the 28px height.

.x-column-header
{
    height: 25px;
}

This solution does not work: If you drag column headers, changing the column's index position, it will break -.-

Recommedations?

Answer 1

To set the height of the column headers, you must set the height after their compilation. Again, the height value for the column configuration does not work to set the height < 28, but works > 28.

I have found that modifying the height after compilation correctly sets the height and allows columns to be draggable (everything works as it should).

Ext.define('Ext.grid.Panel', {
    listeners: {
        beforerender: function (cmp, eOpts) {
            cmp.columns[0].setHeight(25);
        }
    }
});

My solution couldn't use this because I create a dynamic grid. In the dynamic part of the grid I use GRID.reconfigure(); - there by destroying anything that was created on a beforerender state.

Ext.define('Ext.grid.Panel', {
    listeners: {
        reconfigure: function (cmp, eOpts) {
            cmp.columns[0].setHeight(25);
        }
    }
});

The reconfigure function fires after the reconfiguration so this is how I got around the dynamic grid reconfiguration.

Answer 2

You can also use sass sub-styles for that gridpanel and set the 'ui' config:

add ui:'custom-height-item' to your config

@include extjs-panel-ui(
    'custom-height-item',
    $ui-header-line-height: 28px,
    $ui-header-padding: 2px;
    )