让 Ext GridPanel 单元格显示竖线

转载自http://www.monkey6.cn/?p=36

很久没更新了，今天来个小规模更新。

Ext GridPanel 的默认样式的单元格没有显示竖线，若要显示可在页面中加入以下CSS样式：

<style type=“text/css”>
    .x-grid3-cell-inner{
        border-right: 1px solid #eceff6;
    }
</style>

然后发现竖线与表头没有对齐，有一个像素的误差，再加入样式，代码就成了这样：

<style type=“text/css”>
    /*显示竖线*/
    .x-grid3-cell-inner{
        border-right: 1px solid #eceff6;
    }
    /*与表头对齐*/
    .x-grid3-row td, .x-grid3-summary-row td{
        padding-right: 0px;
    }
</style>

接着发现行间有一个像素的间隔，再改吧，代码如下：

<style type=“text/css”>
    /*显示竖线*/
    .x-grid3-cell-inner{
        border-right: 1px solid #eceff6;
    }
    /*与表头对齐*/
    .x-grid3-row td, .x-grid3-summary-row td{
        padding-right: 0px;
    }
    /*去掉行间空白*/
    .x-grid3-row {
        border-top-width: 0px;
        border-bottom-width: 0px;
    }
</style>

上面的代码效果是在代码发芽网弄的，挺靠谱，我喜欢。这样连代码插件都不用安装了，不影响速度，好。

评论

1 楼 chris7w 2011-11-16  

ExtJS 3.3.1
/*用以下CSS使GRID显示竖线*/
.x-grid3-col {
    border-right: 1px solid #eceff6;
}