ExtJS Grid 单元格边框

最新推荐文章于 2020-04-02 10:19:28 发布

iteye_10013

最新推荐文章于 2020-04-02 10:19:28 发布

阅读量629

点赞数 1

分类专栏： ExtJS 文章标签： Firebug

ExtJS 专栏收录该内容

40 篇文章

订阅专栏

本文介绍了在ExtJS不同版本中为Grid组件添加垂直边框的方法，包括整体覆盖样式及针对特定Grid实例的定制化设置。适用于ExtJS 2.2和3.0版本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

回答问题:http://www.iteye.com/problems/21029

给Grid加边框的几种方式:

1.extjs3.0 简单,对grid加一句 columnLines:true ,需要进一步设置样式,就添加个x-grid-with-col-lines

2.extjs2.2 的时候就麻烦一些:

2.1对所有的Gird,覆盖样式:

/* Override standard grid styles (add colour to vertical grid lines) */
.x-grid3-col {
    border-left:  1px solid #EEEEEE;
    border-right: 1px solid #D2D2D2;
}
 
/* Also remove padding from table data (to compensate for added grid lines) */
.x-grid3-row td, .x-grid3-summary-row td {
    padding-left: 0px;
    padding-right: 0px;
}

2.2对某个Grid,对这个grid添加个cls : 'vline-on' ,然后设置样式:

/* Override standard grid styles (add colour to vertical grid lines) */
.vline-on .x-grid3-col {
    border-left:  1px solid #EEEEEE;
    border-right: 1px solid #D2D2D2;
}
 
/* Also remove padding from table data (to compensate for added grid lines) */
.vline-on .x-grid3-row td, .x-grid3-summary-row td {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

其实仔细看下Grid的源码即知,它封装了很多层,对应的样式都预留了接口.

或者用firebug看下即知.

如鼠标悬浮单元格的样式:.x-grid3-row-over .x-grid3-cell-inner