锁定 Grid Chrome ColumnLines 对齐问题答案

【问题标题】：Locking Grid Chrome ColumnLines alignment Issue锁定 Grid Chrome ColumnLines 对齐问题
【发布时间】：2013-12-03 13:36:48
【问题描述】：

在工作示例中 Locking Grid Column Example 我们可以看到水平滚动条滚动到最右边后出现空白。如果未锁定列宽的数量更多，则此空白宽度会更大，这反过来又会错位列行（如果给出columnLines:true）并且看起来很奇怪（如图所示）。

令人惊讶的是，这只发生在 Chrome 中。

在 IE、Safari 和 Firefox 等其他浏览器中运行良好。可能是 chrome 中新的滚动条样式导致了这个问题（在 IE、Firefox、Safari 中有正常的滚动条）。

ExtJS 版本：3.4

浏览器：Chrome 32.0.1700.19

【问题讨论】：

标签： google-chrome extjs gridview grid extjs3

【解决方案1】：

我认为这是this forum post 上正在讨论的错误。好消息是那里有人为它提供了一个很好的解决方案！

【讨论】：

【解决方案2】：

只是在这里引用答案（如果该论坛帖子被删除或地址更改会有所帮助）：

/**
 * Override to fix  box-sizing problem in chrome latest versions
 */
if (!Ext.isDefined(Ext.webKitVersion)) {
    Ext.webKitVersion = Ext.isWebKit ? parseFloat(/AppleWebKit\/([\d.]+)/.exec(navigator.userAgent)[1], 10) : NaN;
}
/*
 * Box-sizing was changed beginning with Chrome v19.  For background information, see:
 * http://code.google.com/p/chromium/issues/detail?id=124816
 * https://bugs.webkit.org/show_bug.cgi?id=78412
 * https://bugs.webkit.org/show_bug.cgi?id=87536
 * http://www.sencha.com/forum/showthread.php?198124-Grids-are-rendered-differently-in-upcoming-versions-of-Google-Chrome&p=824367
 *
 * */
if (Ext.isWebKit && Ext.webKitVersion >= 535.2) { // probably not the exact version, but the issues started appearing in chromium 19
    Ext.override(Ext.grid.ColumnModel, {
        getTotalWidth : function (includeHidden) {
            if (!this.totalWidth) {
                var boxsizeadj = 2;
                this.totalWidth = 0;
                for (var i = 0, len = this.config.length; i < len; i++) {
                    if (includeHidden || !this.isHidden(i)) {
                        this.totalWidth += (this.getColumnWidth(i) + boxsizeadj);
                    }
                }
            }
            return this.totalWidth;
        }
    });

    Ext.onReady(function () {
        Ext.get(document.body).addClass('ext-chrome-fixes');
        Ext.util.CSS.createStyleSheet('@media screen and (-webkit-min-device-pixel-ratio:0) {.x-grid3-cell{box-sizing: border-box !important;}}', 'chrome-fixes-box-sizing');
    });
}

这是一个覆盖，所以只需将其粘贴到一个单独的文件中作为“lockingGridColumnLinesAlignmentFix.js”（可能是！）并在 ext 库之后和您的“应用程序之前包含此文件。 js '（您在其中编写了锁定网格的代码）。

【讨论】：