1. #1
    Ext JS Premium Member
    Join Date
    Aug 2008
    Posts
    34
    Vote Rating
    0
    darind is on a distinguished road

      0  

    Default Bug in computing widths of grid column headers?

    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 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.



    Code:
    //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?


    Code:
    
    <!--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

  2. #2
    Sencha User
    Join Date
    Oct 2010
    Posts
    22
    Vote Rating
    0
    MarcoMalar is on a distinguished road

      0  

    Default Workaround

    Workaround


    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):
    Code:
    .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
    Posts
    1
    Vote Rating
    0
    Mack Talcott is on a distinguished road

      0  

    Default CSS Fix

    CSS Fix


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

    Code:
    .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

Thread Participants: 2

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar