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

 

评论

4 楼 atian25 2011-11-01  

le5u 写道

需要进一步设置样式,就添加个x-grid-with-col-lines

什么意思,楼主能解释解释吗?

意思是,一般情况下加columnLines:true就可以满足你的需求了
但如果你对样式有进一步的要求,就需要自己定义x-grid-with-col-lines这个css

3 楼 le5u 2011-10-31  

需要进一步设置样式,就添加个x-grid-with-col-lines

什么意思,楼主能解释解释吗?

2 楼 atian25 2009-08-31  

看那插件的源码吧...

1 楼 Rooock 2009-08-31  

感谢..全能的天猪~
另..天猪,多表头的插件..行之间能加线么~