ExtJS 4 and grid questions - extjs4

Question

I can't find proper answer for two questions concerning grid (lot of different answers, no one good):
how can I center texts in grid cells vertically;
how can I display vertical lines as well as horizontal.
Be so kind as to prompt me, please.

Answer 1

Apply custom css to your grid. Something like this:
#GridId div.x-grid-cell-inner { text-align: center; }

Answer 2

To center the text in the center of the column use the align property, this way align: 'center'. Notice that the email column is centralized.
In the case of vertical lines it is more complicated.
ExtJS has a setting to show the lines of the column columnLines: true, but doesn’t have a property to show line rows. So we should use a CSS class and set the bottom border, in this way border-bottom-color: red !important;
To test in other versions of ExtJS access this fiddle.
var Grid1Store = new Ext.data.JsonStore({
fields: ['id', 'name', 'email'],
autoLoad: true,
data: [{
"id": 1,
"name": "John Smith",
"email": "jsmith#example.com"
}, {
"id": 2,
"name": "Anna Smith",
"email": "asmith#example.com"
}, {
"id": 3,
"name": "Peter Smith",
"email": "psmith#example.com"
}, {
"id": 4,
"name": "Tom Smith",
"email": "tsmith#example.com"
}, {
"id": 5,
"name": "Andy Smith",
"email": "asmith#example.com"
}, {
"id": 6,
"name": "Nick Smith",
"email": "nsmith#example.com"
}]
});
var onReadyFunction = function() {
var grid = new Ext.grid.GridPanel({
renderTo: Ext.getBody(),
frame: true,
title: 'Example',
width: 450,
height: 200,
store: Grid1Store,
columns: [{
header: "Id",
dataIndex: 'id',
width: '50px'
}, {
header: "Name",
dataIndex: 'name',
width: '150px'
}, {
header: "Email",
dataIndex: 'email',
width: '200px',
align: 'center'
}]
});
}
Ext.onReady(onReadyFunction);
.x-grid-cell {
border-bottom-color: red !important;
}
<script src="http://cdn.sencha.com/ext/gpl/4.2.0/ext-all.js"></script>
<link type="text/css" rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css")/>