ExtJS 4和网格问题

Question

我找不到关于网格的两个问题的正确答案（很多不同的答案，没有一个好）：

• 如何将网格单元格中的文本垂直居中;
• 如何显示垂直线和水平线。

请你好好提示我。

Answer 1

将自定义css应用于您的网格。像这样：

#GridId div.x-grid-cell-inner { text-align: center; }

Answer 2

要将文字置于列中心，请使用align属性，这样align: 'center'。请注意，电子邮件列是集中的。

在垂直线的情况下，它更复杂。 ExtJS 有一个设置来显示列columnLines: true的行，但没有显示行行的属性。因此，我们应该使用CSS类并以这种方式设置底部边框border-bottom-color: red !important;

要在其他版本的ExtJS访问https://jsfiddle.net/hrsxb6wq/中进行测试。

＆＃13;

＆＃13;

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);

＆＃13;

.x-grid-cell {
    border-bottom-color: red !important;
}

＆＃13;

<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")/>

＆＃13;

＆＃13;

＆＃13;