View Full Version : Setting Grid Column Header Height

22 May 2013, 1:20 PM
New to ExtJs , I am having trouble figuring out how to best set the Height of a Column Header inside a grid:

Ive tried implementing via a listener:

listeners: {
beforerender: function (cmp, eOpts) {

and the result is the grid body doesn't show, and I get an error inside firebug console:

TypeError: headerContext.borderInfo is undefined

I have also tried setting the columns object elements with a height as such:

columns: [
{id:'company',header: "Company", height:26,width: 180, sortable: true, dataIndex: 'company' },

It also elicits the same error,

I have tried the CSS route , and modified the header class but then the header covers the first row cels.

Im not sure what to do next. please help

thanks sal

Georgi Yankov
23 May 2013, 3:18 AM
Try this example. For me it works on Ext JS 4.0.7

Ext.create('Ext.data.Store', {
fields:['firstname', 'lastname', 'senority', 'dep', 'hired'],
{firstname:"Michael", lastname:"Scott", senority:7, dep:"Manangement", hired:"01/10/2004"},
{firstname:"Dwight", lastname:"Schrute", senority:2, dep:"Sales", hired:"04/01/2004"},
{firstname:"Jim", lastname:"Halpert", senority:3, dep:"Sales", hired:"02/22/2006"},
{firstname:"Kevin", lastname:"Malone", senority:4, dep:"Accounting", hired:"06/10/2007"},
{firstname:"Angela", lastname:"Martin", senority:5, dep:"Accounting", hired:"10/21/2008"}

Ext.create('Ext.grid.Panel', {
title: 'Column Demo',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [
{text: 'First Name', dataIndex:'firstname', height: 40},
{text: 'Last Name', dataIndex:'lastname'},
{text: 'Hired Month', dataIndex:'hired', xtype:'datecolumn', format:'M'},
{text: 'Department (Yrs)', xtype:'templatecolumn', tpl:'{dep} ({senority})'}
width: 400,
renderTo: Ext.getBody()

23 May 2013, 4:42 AM
Have the same issue. Here is an example app:

Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.test', 'app');
name: 'Grid reconfigure test',
launch: function(){
Ext.create('Ext.container.Viewport', {
items: [{
xtype: 'container',
items: [{
xtype: 'grid',
id: 'gridId',
columns: [],
store: new Ext.data.Store({fields: []})}]}],
listeners: {afterrender: function(){
var grid = Ext.getCmp('gridId');
grid.reconfigure(new Ext.data.Store({
fields: [
data: [{
field1: 2,
field2: 'text1',
field3: 'text2'}],
proxy: {
type: 'memory',
reader: {type: 'json'}}}), [
text: 'Field 1',
width: 135,
height: 45,
dataIndex: 'field1'},
text: 'Field 2',
width: 60,
height: 45,
dataIndex: 'field2'}]);


Using ExtJS 4.1.3 - it works.
Using ExtJS 4.2.0 - I'm getting the following error Cannot read property 'height' of undefined

The problem is the same in different browsers. After some debugging it uppears that "borderInfo" object of Ext.layout.ContextItem class is not initialized. Changing this object reference to getBorderInfo() method solves the problem. It also works with ExtJs 4.2.0 if height/width column settings are commented out.

Is this a bug?

23 May 2013, 6:24 AM
Ive tried goergi's code and still get error,

@Alsid :

could you demonstrate your work around

"Changing this object reference to getBorderInfo() "


23 May 2013, 9:52 AM
I was experimenting and changed the code in Ext.grid.column.Column class:

availableHeight -= headerContext.borderInfo.height;
availableHeight -= headerContext.getBorderInfo().height;
because getBorderInfo() method just initializes borderInfo in a lazy way.

This method is in a Ext.layout.ContextItem class.

This is an experiment and it's definitely not a solution of the problem.

28 May 2013, 4:35 AM
It looks like problem solved in latest 4.2.1 release of Ext JS.