ExtJS Grid 单元格边框

回答问题: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