Results 1 to 3 of 3

Thread: Bug in computing widths of grid column headers?

  1. #1
    Ext JS Premium Member
    Join Date
    Aug 2008
    Vote Rating

    Default Bug in computing widths of grid column headers?

    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 rows 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 grids header to be 18 pixels wider than the width of child grids rows. As a result, the columns dont 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{
                    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{
                    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"
    How can we force Ext to generate the same

  2. #2
    Sencha User
    Join Date
    Oct 2010
    Vote Rating

    Default Workaround

    Hi, the same or similar bug has been reported in some other threads, but no answer from ExtJs Team.

    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.

  3. #3
    Sencha User
    Join Date
    Aug 2009
    Vote Rating

    Default CSS Fix

    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;

Similar Threads

  1. grid column widths not setting, column header not showing, or overlapping
    By amccarri in forum Ext 2.x: Help & Discussion
    Replies: 15
    Last Post: 22 Oct 2009, 1:57 AM
  2. Grid column headers displayed with wrong widths in FF3 & Chrome
    By bittercoder in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 12 Jan 2009, 3:25 PM
  3. Grid column widths?
    By semantic value in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 12 Jan 2008, 2:42 PM
  4. refreshing/recalculating grid column widths?
    By vendiddy in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 12 Jan 2008, 2:48 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts