首先声明此问题是在extjs3版本.
我用ColumnHeaderGroup组件发现 在chrome19以前版本没有问题,但在chrome19+的时候,,显示不正确,所以找问题,发现问题在这里,可以看下面连接
[url]http://code.google.com/p/chromium/issues/detail?id=124816[/url]
那么解决方式有3种:
1.修改EXTJS-JS文件和ColumnHeaderGroup.js
2.修改EXTJS-CSS文件
3.增加另外CSS文件覆盖 --个人推荐用这个
下面具体解决方法
解决方法一、修改EXTJS-JS GridView.js文件和ColumnHeaderGroup.js
[color=red]注:这种方式我只测试了chrome和firefox,没有测试其他浏览器的执行情况[/color]
在 GridView.js 里面的
修改成
同样修改 ColumnHeaderGroup.js
修改成
解决方法二、修改extjs css样式
在 extjs 的css样式里面有这个
修改成
然后下面就比较搞了,注意看 ColumnHeaderGroup.js 里面这段代码
出现了一个 x-grid3-gcell 样式,我找遍所有ux的CSS文件 居然没发现有这个东东。
得,还得加上一个这个样式,照抄 x-grid3-cell
解决方法三、 干脆增加一个mycss文件 直接覆盖对应样式。
这样不用修改所有原文件。
我就是这么干的。
OK,完毕
我用ColumnHeaderGroup组件发现 在chrome19以前版本没有问题,但在chrome19+的时候,,显示不正确,所以找问题,发现问题在这里,可以看下面连接
[url]http://code.google.com/p/chromium/issues/detail?id=124816[/url]
那么解决方式有3种:
1.修改EXTJS-JS文件和ColumnHeaderGroup.js
2.修改EXTJS-CSS文件
3.增加另外CSS文件覆盖 --个人推荐用这个
下面具体解决方法
解决方法一、修改EXTJS-JS GridView.js文件和ColumnHeaderGroup.js
[color=red]注:这种方式我只测试了chrome和firefox,没有测试其他浏览器的执行情况[/color]
在 GridView.js 里面的
getColumnWidth : function(column) {
var columnWidth = this.cm.getColumnWidth(column),
borderWidth = this.borderWidth;
if (Ext.isNumber(columnWidth)) {
if (Ext.isBorderBox || (Ext.isWebKit && !Ext.isSafari2)) {
return columnWidth + "px";
} else {
return Math.max(columnWidth - borderWidth, 0) + "px";
}
} else {
return columnWidth;
}
},
修改成
getColumnWidth : function(column) {
var columnWidth = this.cm.getColumnWidth(column),
borderWidth = this.borderWidth;
if (Ext.isNumber(columnWidth)) {
if (Ext.isBorderBox /**这里去掉了*/) {
return columnWidth + "px";
} else {
return Math.max(columnWidth - borderWidth, 0) + "px";
}
} else {
return columnWidth;
}
},
同样修改 ColumnHeaderGroup.js
getGroupStyle: function(group, gcol){
var width = 0, hidden = true;
for(var i = gcol, len = gcol + group.colspan; i < len; i++){
if(!this.cm.isHidden(i)){
var cw = this.cm.getColumnWidth(i);
if(typeof cw == 'number'){
width += cw;
}
hidden = false;
}
}
return {
width: (Ext.isBorderBox || (Ext.isWebKit && !Ext.isSafari2) ? width : Math.max(width - this.borderWidth, 0)) + 'px',
hidden: hidden
};
},
修改成
getGroupStyle: function(group, gcol){
var width = 0, hidden = true;
for(var i = gcol, len = gcol + group.colspan; i < len; i++){
if(!this.cm.isHidden(i)){
var cw = this.cm.getColumnWidth(i);
if(typeof cw == 'number'){
width += cw;
}
hidden = false;
}
}
return {
width: (Ext.isBorderBox ? width : Math.max(width - this.borderWidth, 0)) + 'px',
hidden: hidden
};
},
解决方法二、修改extjs css样式
在 extjs 的css样式里面有这个
.x-grid3-cell{
-moz-user-select: none;
-khtml-user-select:none;
-webkit-user-select:ignore;
}
修改成
.x-grid3-cell{
-moz-user-select: none;
-khtml-user-select:none;
-webkit-user-select:ignore;
box-sizing: border-box;
}
然后下面就比较搞了,注意看 ColumnHeaderGroup.js 里面这段代码
ts.gcell = new Ext.XTemplate('<td class="x-grid3-hd x-grid3-gcell x-grid3-td-{id} ux-grid-hd-group-row-{row} {cls}" style="{style}">', '<div {tooltip} class="x-grid3-hd-inner x-grid3-hd-{id}" unselectable="on" style="{istyle}">', this.grid.enableHdMenu ? '<a class="x-grid3-hd-btn" href="#"></a>' : '', '{value}</div></td>');
出现了一个 x-grid3-gcell 样式,我找遍所有ux的CSS文件 居然没发现有这个东东。
得,还得加上一个这个样式,照抄 x-grid3-cell
解决方法三、 干脆增加一个mycss文件 直接覆盖对应样式。
这样不用修改所有原文件。
我就是这么干的。
.x-grid3-cell{
-moz-user-select: none;
-khtml-user-select:none;
-webkit-user-select:ignore;
box-sizing: border-box;
}
.x-grid3-gcell{
-moz-user-select: none;
-khtml-user-select:none;
-webkit-user-select:ignore;
box-sizing: border-box;
}
OK,完毕