Increase the overall font size of a datagrid in ext-js

[edhkirk]

How do you increase the font size and row height of a datagrid in ext-js?

I have been only able to change a column through a renderer - but there must be a simpler way to increase the size of all of the text in the grid along with a taller row height.

[evant]

Just use css rules to modify it appropriately. Poke around with firebug to find out what stuff you need to change.

[darthwes]

x-grid3-cell-inner

[edhkirk]

Should I be modifying the ext-all.css file? Isn't that bad?

[darthwes]

Sounds pretty naughty to me. The reason it's bad is because it's hard to remember the mods when you upgrade. But you can declare your own style.

#my-grid .x-grid3-cell-inner {
  font-size: 16px;
  color: red;
  background-color: green;
}

And use the grid's id in your custom css definition. This allows you to do:

myGrid = new Ext.grid.GridPanel({
  id: 'my-grid',
  ...
});

For the win?

[edhkirk]

Great - thank you - that works.

What is the css parameter to adjust the row height to match the increased the larger font size?

[edhkirk]

I looked at this topic:

http://gwt-ext.com/forum/viewtopic.php?f=9&t=1683

There should be a difference between wrapping and setting a row height - correct?

[darthwes]

.x-wes {
	height: 18px;
}

viewConfig: {
	getRowClass: function() {
		return 'x-wes';
	}
},

This isn't a good solution unless you've used the first solution I've posted, since the heights are being declared twice, you can end up with a cell-inner class's height/width/size being bigger than the size specified in 'x-wes' or equiv class.

IE, Don't make the row smaller than the cells in it or it is gonna look terrible. Of course, if you did it then the onus is on you to make sure you keep these synched.