Ext Grid网格添加竖条线

　　Grid表格默认是只有横线，但是我们想象Excel那样有个竖条线，

　　Ext 3.0就有一个 columnLines 属性 把他设置为true，就可以了。效果如下：

囧 好像看不清哦！！

 

但是在Ext 2.0就没有这个属性，我们可以改他的css样式：

 

 

代码

   
    
    
    
    

    
    
    
    
    
    
 
    
 
    
     
     
     
     <style>
 
    
    
    
    
    
 
    
 
    
     
     
     
     /*
    
    
    
    
    
 
    
 
    
     
     
     
      Override standard grid styles (add colour to vertical grid lines) 
    
    
    
    
    
 
    
 
    
     
     
     
     */
    
    
    
    
    
 
    
 
    
     
     
     
      
 .vline-on .x-grid3-col 
    
    
    
    
    
 
    
 
    
     
     
     
     {
    
    
    
    
    
 
    
 
    
     
     
     
      
 border-left
    
    
    
    
    
 
    
 
    
     
     
     
     :
    
    
    
    
    
 
    
 
    
     
     
     
      1px solid #EEEEEE
    
    
    
    
    
 
    
 
    
     
     
     
     ;
    
    
    
    
    
 
    
 
    
     
     
     
      
 border-right
    
    
    
    
    
 
    
 
    
     
     
     
     :
    
    
    
    
    
 
    
 
    
     
     
     
      0px 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
    
    
    
    
    
 
    
 
    
     
     
     
     ;
    
    
    
    
    
 
    
 
    
     
     
     
      
 padding-right
    
    
    
    
    
 
    
 
    
     
     
     
     :
    
    
    
    
    
 
    
 
    
     
     
     
      0px
    
    
    
    
    
 
    
 
    
     
     
     
     ;
    
    
    
    
    
 
    
 
    
     
     
     
      
 
    
    
    
    
    
 
    
 
    
     
     
     
     }
    
    
    
    
    
 
    
 
    
     
     
     
      
 
 </style> 
   
   
   
   
   

   

   
    
    
    
    

然后在grid配置项里：

cls : 'vline-on',

 

 

　要是大家 想把所有的网格都变这样：

把vline-on去掉 不需要在cls配置了，所有的网格都变成表格形式了。