ExtJS 4.1 How to change grid panel header height

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) {

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.

    height: 25px;

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


How to change header template in extjs 4 grid panel

I want to change default header template of grid. I do not know what config or property to set. I tried renderTpl , tpl , metaRowTpl but these property related to row in grid, where i want to ch

Change ExtJS Grid Height in Javascript

How can I point at the object of a ExtJS Grid and manually set the height (in pixels)? For example, with this same: var grid = new Ext.grid.GridPanel({ store: store, columns: [ {id:’company’,header: ‘

Extjs grid panel with checkboxes

How i can create ExtJs grid panel with checkboxes like here.

How to remove title of grid panel? – ExtJs

I have one simple grid panel in ExtJs 5 Ext.create(‘Ext.grid.Panel’, { height: 700, frame: true, title: ”, …. }); I want to delete the title of grid (or it is title of panel), but I don’t know how

ExtJS4 – All headers are not displayed in Grid Panel Header in Internet Explorer

I am facing an issue with the extjs 4 grid panel header. There are four columns in my grid panel. Lets assume they are 1,2,3 and 4. The header 1 and 2 are not getting displayed but on slightest change

Extjs Grid panel – Change enableColumnHide property after render

Please help! I’m using ExtJs 4.1 grid panel. I’m looking for a way to change the grid enableColumnHide property after rendering. I reuse the same grid in a few screens with minor changes, mainly hidin

how to group header grid in extjs?

How to group header like grid below in extjs: |————– A1 header————|————–B1 Header—————| |—-A2Header—|—A3Header—|—-B2Header—|—B3Header——| |—–A2D

How to add panel under header in a rendered grid in ExtJs

Let’s say I have this grid: http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/grid/group-header-grid.html How can I add another header,panel or whatever we call it under the original headers : http:

Set Extjs Panel’s Height (Layout) After It’s Child items taken their height

How can we recalculate the Extjs-4 Panel’s Height After it’s Child items like Grid (Which have auto height) takes their height.

Extjs – force panel/grid to be 100% height

I have a simple grid/panel that is located under a tab. I cant get it to be in 100% height of the parent tab. How do you do it? height:’100%’ and viewConfig:{ forceFit: true } wont work. Thanks


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) {

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) {

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

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(
    $ui-header-line-height: 28px,
    $ui-header-padding: 2px;