【轉】解決ExtJS的gridpanel在谷歌瀏覽器中,表頭總寬度與每行的總寬度不一致的bug
Posted on 2013-01-30 15:30 小胡子 閱讀(1018) 評論(1) 編輯 收藏 所屬分類: Ext[代碼] [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
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