How can I set grid row height in Extjs 4? - extjs

Question

I use Ext.grid.Panel in my project, but I think the default row height is too large and I can't modify the row height, so the whole grid makes me feel uncomfortable.
However, I find the panel-grid example in Extjs-4 doc is quite good. In it the row height is adjusted to fit the words height.Thus the whole grid is very compact.
So I wonder how can I set the grid row height?

Answer 1

One way you could change the row height is by using css. Each row uses padding along with the content for the height so if you were change the padding in this class it would make the row higher/lower:
.x-grid-cell-inner {
overflow: hidden;
padding: 3px 6px;
white-space: nowrap;
}
Also, you can take a look here:
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.view.Table-method-getRowClass

Answer 2

The following code uses a getRowClass function for the grid to specify a CSS class for specific rows:
JavaScript Code
viewConfig : {
forceFit : true,
getRowClass : function(record, index) {
if (index % 2 == 0)
return "red";
else
return "green";
}
},
The height can then be modified with CSS:
CSS Code
.red .x-grid-cell {
background-color: #FFFFDD;
height: 30px;
}