Problem with Locking Grid

REQUIRED INFORMATION
Ext version tested:

Ext 4.1.1a (also 4.2.0 beta)

Browser versions tested against:

Firefox 17.0.1 (Windows 7)

Description:

I'm trying to create a grid which is using a locked first column. I want to use grouped headings for my columns. Even though the first column doesn't need a grouped heading, I wanted the first column name to appear on the same line as the remaining column names. I gave the first column a grouped header and locked it. When the grid is displayed, the first column does not get the proper width. If you resize the column by just a couple of pixels, it will resize to the width defined in the code. I also noticed that if you use a double line header ('Company<br/>Name') the remaining columns do not render properly (see image below)

Steps to reproduce the problem:

Create a grid with grouped column headers. Make the first grouped header a single column and lock the column. Set a width on the column to something moderately wide (200px, for example)

The result that was expected:

The grid should display with a locked first column of 200 px (or whatever the width was that was set in the code)

The result that occurs instead:

When the window is displayed, the locked column is very narrow. If you click on the column separator and drag it a couple of pixels and release, the column will resize the the proper width.

Test Case:

I modified the locking-grid.js file found in the examples. The key change occurs around line 86 where I changed the column definitions to use a grouping header. There is one grouping header for the first column, which is also the locked column, and a second grouping header for the remaining columns.

Screenshot - Note the first column is not 200 pixels as specified in the code. Also note that the column separators in the other columns do not go all the way down. This is an artifact of the <br/> used in the first column name.