Grids are rendered differently in upcoming versions of Google Chrome

[uwolfer]

I have changed the fix to check the WebKit version instead of the Chrome version so it works with any WebKit based browser (I have tested Chrome and Safari).

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');
    });
}

[vot]

It is a shame that there is no official update or patch (nor any comment except 'We are working on it') to fix this issue after that long time. There are products, commercial or OSS, out there that are still using version 3.x and are not able to migrate to 4.x.

[feyyaz]

+1 Thx a lot for this fix, works perfect!

[wm003]

OMG this is a perfect fix! Thanks a lot!

[psm1963]

Can someone please assist as to where this fragment of code should be placed...somewhere in ExtJS codebase or in one's own app...thanks

[scottmartin]

It is an override .. so create a new file called override.js in included it after ext-all.js and before your app.js

Scott.

[Vaibhav.Shukla]

I tried to create a file override.js and called between ext-all.js and app.js

Still i am getting error as

"Uncaught TypeError: Cannot read property '$isClass' of undefined ext-all-debug.js:196
Ext.apply.override ext-all-debug.js:196
(anonymous function)"

Please suggest what to do?

[sidthegooner]

Issue Still persists with locking grid views... Does fix it for normal grid panels