解决ExtJS的gridpanel在谷歌浏览器中，表头总宽度与每行的总宽度不一致的bug

[代码] [JavaScript]代码

1

//先看bug

[图片] EXT-bug1.png

[图片] EXT-bug2.png

[代码] [JavaScript]代码

//修复办法，谷歌浏览器中,table的单元格实际宽度=指定宽度+padding，所以只要重写gridview里的一个方法，如下：

 1  // 修复办法，谷歌浏览器中,table的单元格实际宽度=指定宽度+padding，所以只要重写gridview里的一个方法，如下：
 2  Ext.override(Ext.grid.GridView,{
 3          getColumnStyle :  function (colIndex, isHeader) {
 4               var  colModel   =   this .cm,
 5                  colConfig  =  colModel.config,
 6                  style      =  isHeader  ?  '' : colConfig[colIndex].css  ||  '',
 7                  align      =  colConfig[colIndex].align;
 8              
 9               if (Ext.isChrome){
10                  style  +=  String.format( " width: {0}; " , parseInt( this .getColumnWidth(colIndex)) - 2 + 'px');
11              } else {
12                  style  +=  String.format( " width: {0}; " ,  this .getColumnWidth(colIndex));
13              }
14              
15               if  (colModel.isHidden(colIndex)) {
16                  style  +=  'display: none; ';
17              }
18              
19               if  (align) {
20                  style  +=  String.format( " text-align: {0}; " , align);
21              }
22              
23               return  style;
24          },
25      });
26 

[代码] [JavaScript]代码

//看看修复过后的效果

原文出自：

http://www.oschina.net/code/snippet_201314_15163