Блокировка сетки Хромированная колонка Выравнивание строк Выпуск

Question

В рабочем примере Locking Grid Column Example мы видим, что пробел, идущий после горизонтальной полосы прокрутки, прокручивается в крайнее правое положение. Эта ширина пробела будет больше, если количество разблокированных столбцов больше, что в свою очередь смещает строки столбцов (если дано columnLines:true) и выглядит странно (как показано на рисунке).

Удивительно, но это происходит только в Chrome.

В других браузерах, таких как IE, Safari и Firefox, он работает нормально. Может быть, новый стиль прокрутки в chrome вызывает эту проблему (там, где в IE, Firefox, Safari есть обычная полоса прокрутки).

ExtJS Версия: 3,4

Browser: Chrome 32.0.1700.19

Answer 1

Я думаю, что это ошибка, которая обсуждается на this forum post. Хорошей новостью является то, что кто-то там дал хорошее решение для этого!

Answer 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 и перед вашим' app.js '(в котором вы написали код для блокировки сетки).