View Full Version : Grid column headers not displayed

16 Sep 2013, 4:51 AM
Hey all,

it's me again with another - possibly stupid - question, this time regarding grid column headers.
They are simply not displayed when using the mvc pattern.
If i put my exact code into jsfiddle and change Ext.define to Ext.create and set renderTo: Ext.getBody(), then the column headers are shown, just not within the mvc pattern.

I'm using ExtJs 4.2.1 by the way.

My code:

Ext.define("TeamTool.view.usermanager.listPanel",{ extend: 'Ext.grid.Panel',
alias: 'widget.TeamTool.userManagerList',

store: {
fields:['user_id', 'user_firstname', 'user_surname'],
proxy: {
type: 'ajax',
reader: {
type: 'json',
root: 'users'
url: '',
header: {
title: 'All Accounts',
columns: [
text: 'Options',
xtype: 'actioncolumn',
width: 40,
items: [
icon: 'resources/img/pencil.png',
text: 'Edit',
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex){
{ text: 'First Name', dataIndex: 'user_firstname', flex: 1, },
{ text: 'Surname', dataIndex: 'user_surname', flex: 1, },
xtype: 'actioncolumn', // place holder spanning empty area
flex: 4,

My Fiddle: http://jsfiddle.net/w24rZ/
(http://jsfiddle.net/w24rZ/)I don't really know how i would put my complete mvc pattern code into a jsfiddle, so i can't test if it's somehow my version of ExtJs (4.2.1) as the fiddle's newest version is 4.2.0.

Is there anything special regarding column headers when using the mvc pattern? Any hints or solutions where to look?

Thanks very much in advance!

17 Sep 2013, 7:23 AM
You may want to give a try to Sencha's fiddle (fiddle.sencha.com).
Also, why don't you set title directly on panel without wrapping in 'header' subobject?
And why do you leave trailing commas? Not everyone likes them.

17 Sep 2013, 9:39 PM
Hello ettavolt,

thanks for your reply!

I'm just lazy with that commas ;) Saves me some time because i always forget to add the comma when i add some new content to those objects.
Had direct title before, then i added something for the header - think it was a different height then default - but removed it later again.

I'll give Sencha Fiddle a try, thanks for giving me that hint.

But anyways, another thought, is it possible that another setting somewhere in my app might set the grid column headers to 0?
Some params seem to get passed to child-elements as e.g. align='strech' for layout.
I didn't explicitly set any headers to 0 height, but i have hidden some by passing header=false to a panel, maybe some side effects are possible?
Could that hide my child-grids column headers also?
Can anyone explain to me how exactly such layout parameters get passed by? Do all get passed or just some?


18 Sep 2013, 12:42 AM
There is a hideHeaders option for grid, but it works only before component is instantiated.
Layout settings of grid or its parent do not affect headers container layout.