Bug in computing widths of grid column headers?

[darind]

We believe there may be a bug in how Ext computes the grid widths. Specifically, when we set “enableRowBody: true” in the ViewConfig, and then insert a child grid into the parent row’s body, we see Ext renders the child grid with the column headers not lining up with the columns in the rows. Drilling down in the output HTML, we discovered Ext sets the width of the child grid’s header to be 18 pixels wider than the width of child grid’s rows. As a result, the columns don’t line up with the headers. Manually editing the HTML to add those 18 pixels to the width fixes everything. Is there a workaround for this? Any idea why Ext would be inconsistent about the widths?
We first discovered this issue while using the RowExpander plugin, but to rule that out, we stripped down the code to remove the extension and produce this code here. Look at the columns on the right (“Child Col K”) and see how far off the alignment is.
Here is the code and the output HTML.

//Insert a child row under the parent grid's row. Note the child grid's column headers don't
        //line up with the child grid's column rows
        function afterRender(parentGrid) {
            var row = parentGrid.view.getRow(0);
            var rowBody = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);
            var childStore = new Ext.data.ArrayStore({
                autoDestroy: true,
                fields: ['Child Col A', 'Child Col B', 'Child Col C', 'Child Col D', 'Child Col E', 'Child Col F', 'Child Col G', 'Child Col H', 'Child Col I', 'Child Col J', 'Child Col K'],
                data: [
                            ['Test Data', 'Test Data', 'Test Data', 'Test Data', 'Test Data', 'Test Data', 'Test Data', 'Test Data', 'Test Data', 'Test Data', 'Test Data'],
                            ['Test Data', 'Test Data', 'Test Data', 'Test Data', 'Test Data', 'Test Data', 'Test Data', 'Test Data', 'Test Data', 'Test Data', 'Test Data']
                        ]
            });
            
            var childGrid = new Ext.grid.GridPanel({
                store: childStore,
                columns: [
                                { header: 'Child Col A', dataIndex: 'Child Col A' },
                                { header: 'Child Col B', dataIndex: 'Child Col B' },
                                { header: 'Child Col C', dataIndex: 'Child Col C' },
                                { header: 'Child Col D', dataIndex: 'Child Col D' },
                                { header: 'Child Col E', dataIndex: 'Child Col E' },
                                { header: 'Child Col F', dataIndex: 'Child Col F' },
                                { header: 'Child Col G', dataIndex: 'Child Col G' },
                                { header: 'Child Col H', dataIndex: 'Child Col H' },
                                { header: 'Child Col I', dataIndex: 'Child Col I' },
                                { header: 'Child Col J', dataIndex: 'Child Col J' },
                                { header: 'Child Col K', dataIndex: 'Child Col K' }
                            ],
                autoHeight: true,
                renderTo: rowBody
            });
        }

        Ext.onReady(function() {
            var parentStore = new Ext.data.ArrayStore({
                autoDestroy: true,
                fields: ['Column A', 'Column B', 'Column C'],
                data: [
                    ['Top Data', 'Top Data', 'Top Data']
                ]
            });

            var parentGrid = new Ext.grid.GridPanel({
                renderTo: 'nestedGridDiv',
                height: 300,
                store: parentStore,
                cm: new Ext.grid.ColumnModel({
                    columns: [
                            { header: 'Column A', dataIndex: 'Column A' },
                            { header: 'Column B', dataIndex: 'Column B' },
                            { header: 'Column C', dataIndex: 'Column C' }
                        ]
                }),
                viewConfig: {
                    forceFit: true,
                    enableRowBody: true
                }
            });

            parentGrid.on('viewready', afterRender, this);
        });

And here is the relevant section of the generated HTML. Note that the header has a width of 1251px, but the rows have a width of 1233px. That seems to be the problem. But where is the width coming from?

<!--GRID HEADERS:-->

<div id="ext-gen29" class="x-grid3-header">
   <div id="ext-gen31" class="x-grid3-header-inner">
     <!---NOTICE THE DISCREPENCY BETWEEN 1251px and 1233px-->
      <div class="x-grid3-header-offset" style="width: 1251px;">
         <table style="width: 1233px;" border="0" cellpadding="0" cellspacing="0">
               ...



<!--GRID ROWS: Manually changing all the 1231px to 1255 px will fix the render issue-->
<div style="overflow: visible;" id="ext-gen30" class="x-grid3-scroller">
   <div id="ext-gen32" class="x-grid3-body" style="width: 1233px;">
      <div class="x-grid3-row x-grid3-row-first" style="width: 1233px;">
         <table class="x-grid3-row-table" style="width: 1233px;" border="0" cellpadding="0"
                                                cellspacing="0">

How can we force Ext to generate the same

[MarcoMalar]

Hi, the same or similar bug has been reported in some other threads, but no answer from ExtJs Team.
http://www.sencha.com/forum/showthre...lumn+alignment
http://forums.ext.net/showthread.php...ridPanel/page2
http://www.sencha.com/forum/showthre...lumn+alignment
http://www.sencha.com/forum/showthre...-to-the-right.
...

My workaround is to override the width in my stylesheet with the right one (in my case 1200 to 1219):

.childgrid .x-panel-bwrap .x-panel-body .x-grid3 .x-grid3-viewport .x-grid3-scroller .x-grid3-body .x-grid3-row table.x-grid3-row-table {
    width:1219px !important;
}

.childgrid .x-panel-bwrap .x-panel-body .x-grid3 .x-grid3-viewport .x-grid3-scroller .x-grid3-body .x-grid3-row{
    width:1219px !important;
}

This is not a nice solution but it works (possibly not in IE6?).
Another way (for all browsers) would be to use javascript and jquery to override the inline html style.

Nevertheless the bug should be fixed in ExtJs.

[Mack Talcott]

I was able to get around this by moving the borders to the inner header, rather than the td:

.x-grid3-hd-inner {
  border-left: 1px solid;
  border-right: 1px solid;
  border-left-color: #eee;
  border-right-color: #d0d0d0;
}


.x-grid3-hd-row td {
  border-left: 0;
  border-right: 0;
}