CSS - ExtJS 4 - 为网格面板列标题设置样式

Question

美好的一天。我正在开发一个Web应用程序。我有一个表格，我有一个网格面板。我希望Grid Panel在它周围和列之间有一个边框。我已经为Grid View实现了这一点，但是，我正在努力为列标题添加边框。以下是我的网格面板的样子：

如您所见，网格视图（列标题下方的网格视图）周围有边框，而列标题则没有。这是我使用的CSS资源：

.child-row .x-grid-cell{
    font-size: 17px; 
    font-weight: bold; 
    font-style: italic; 
    font-family: 'Times New Roman';

    border-bottom-color: #000000; 
    border-bottom-style: solid; 
    border-top-color: #000000; 
    border-top-style: solid; 
    border-right-color: #000000; 
    border-right-style: solid; 
    border-left-color: #000000; 
    border-left-style: solid; 

    line-height: 17px;
    height: 100px;
    padding: 0px;
    margin: 0px;
    vertical-align: middle;
} 

.child-row .x-grid-cell-inner{
    text-align:center !important;
    white-space: normal !important;
}

到目前为止，它在网格单元的样式方面效果很好。我在gridView中使用了这个：

viewConfig: {
    getRowClass: function(record, rowIndex, rowParams, store) {
        return 'child-row';
    },
    itemId: 'pfReceiptGrid',
    style: 'border: solid Black 1px'
},

我需要将边框代码放在那里，否则，只有列的内部才会有边框。

任何人都可以帮我吗？我不熟悉CSS而且我是ExtJS 4中的新手。我已经被困在这里很长一段时间尝试各种.x-grid-代码，希望能使某些东西工作但无济于事。提前感谢您的帮助。

Answer 1

以下内容将为所有Extjs 4网格添加标题（基于应用程序http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/array-grid.html）。如果您不想影响其他网格组件，那么您可以在此网格中添加ID并限制CSS应用于此特定网格（#myGrid）。

.x-grid-header-ct { border: 1px solid #000; }
.x-grid-header-ct .x-box-inner { border-bottom: 1px solid #000;}
.x-grid-header-ct .x-box-inner .x-column-header-inner { border-right: 1px solid #000; }

Answer 2

当我遇到类似问题时，我会尝试检查html代码，希望找到合适的css类。你试过吗

.x-column-header { border-right: 1px solid #7e7e7e; /*your style here*/ }