关于extjs3-ux扩展组件 ColumnHeaderGroup 在chrome19以上版本出问题的解决

首先声明此问题是在extjs3版本.
我用ColumnHeaderGroup组件发现 在chrome19以前版本没有问题，但在chrome19+的时候，，显示不正确，所以找问题，发现问题在这里，可以看下面连接
http://code.google.com/p/chromium/issues/detail?id=124816
那么解决方式有3种：
1.修改EXTJS-JS文件和ColumnHeaderGroup.js
2.修改EXTJS-CSS文件
3.增加另外CSS文件覆盖 --个人推荐用这个

下面具体解决方法
解决方法一、修改EXTJS-JS  GridView.js文件和ColumnHeaderGroup.js
注：这种方式我只测试了chrome和firefox，没有测试其他浏览器的执行情况
在 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，完毕