ExtJS 3.2: Grid column header grouping

Question

ExtJS 3.2 grid column header grouping is incorrect in Google Chrome 19, but it's works in other versions. Example: http://myext.cn/ext-3.2.1/examples/grid/ColumnHeaderGroup.html.
Google Chrome 19: Mozilla; Chrome 17,18:

Is there a way to solve this?

Answer 1

examples/ux/ColumnHeaderGroup.js:383 tw = this.getTotalWidth() -> 970px. All of ten .x-grid3-hd-row td's have style="width: 97px" but the actual size of the each column header is 99px: 97 by given width and 2 for left and right borders. In firefox as I see the style is 95px so all headers render ok.

So I think it is a some kind of old ExtJS bug related to box-sizing and corresponding column width calculations in the table.

Answer 2

Answer is in this Sencha Forum thread: http://www.sencha.com/forum/showthread.php?198124-Grids-are-rendered-differently-in-upcoming-versions-of-Google-Chrome

Or I've done my own solution (synthese of other solutions mainly based on this: https://code.google.com/p/chromium/issues/detail?id=124816#c29)

Add to your CSS:

/* Chrome 19+ bugfix for grids; Works with Chrome 21+
 * @url http://www.sencha.com/forum/showthread.php?198124-Grids-are-rendered-differently-in-upcoming-versions-of-Google-Chrome&p=809242&viewfull=1#post809242
 * @url http://www.sencha.com/forum/showthread.php?198124-Grids-are-rendered-differently-in-upcoming-versions-of-Google-Chrome&p=823517&viewfull=1#post823517
 * @url 

*/
@media screen and (-webkit-min-device-pixel-ratio:0) { 
    .x-grid3-cell, /* Normal grid cell */
    .x-grid3-gcell /* Grouped grid cell (esp. in head)*/
    {
        box-sizing: border-box;
    }
}