1. #1
    Ext User
    Join Date
    Feb 2008
    Posts
    1
    Vote Rating
    0
    jbenetz is on a distinguished road

      0  

    Default [2.1][DUP][FIXED] GridView columns bodies not resizing with column headers

    [2.1][DUP][FIXED] GridView columns bodies not resizing with column headers


    This may sound like a bit of an edge case but I think it will be common problem with how our users will be using this grid. When a grid is scrolled horizontally, all the way to the right, and column headers are resized smaller the column bodies do not resize correctly. Interestingly, any subsequent movement of the scrollbar will cause the column bodies to render correctly. This will not occur if the horizontal scrollbar is not all the way to the right. And it will only occur if columns are resized wider (as this moves the horizontal scroll bar a little bit and caused a redraw).

    This is observed on Ext 2.1 on Windows XP, IE v6.0.2900.2180.exsp_sp2_grr.070227-2254

    I can reproduce this with the array-grid example simply by adding a few extra columns to force horizontal scrolling.
    Code:
    /*
     * Ext JS Library 2.1
     * Copyright(c) 2006-2008, Ext JS, LLC.
     * licensing@extjs.com
     * 
     * http://extjs.com/license
     */
    
    Ext.onReady(function(){
    
        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    
        var myData = [
            ['3m Co',71.72,0.02,0.03,'9/1 12:00am','More stuff','And yet more stuff', 'final cell'],
            ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am','More stuff','And yet more stuff', 'final cell'],
            ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am','More stuff','And yet more stuff', 'final cell'],
            ['American Express Company',52.55,0.01,0.02,'9/1 12:00am','More stuff','And yet more stuff', 'final cell'],
            ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am','More stuff','And yet more stuff', 'final cell'],
            ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am','More stuff','And yet more stuff', 'final cell'],
            ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am','More stuff','And yet more stuff', 'final cell'],
            ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am','More stuff','And yet more stuff', 'final cell'],
            ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am','More stuff','And yet more stuff', 'final cell'],
            ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am','More stuff','And yet more stuff', 'final cell'],
            ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am','More stuff','And yet more stuff', 'final cell'],
            ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am','More stuff','And yet more stuff', 'final cell'],
            ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am','More stuff','And yet more stuff', 'final cell'],
            ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am','More stuff','And yet more stuff', 'final cell'],
            ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am','More stuff','And yet more stuff', 'final cell'],
            ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am','More stuff','And yet more stuff', 'final cell'],
            ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am','More stuff','And yet more stuff', 'final cell'],
            ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am','More stuff','And yet more stuff', 'final cell'],
            ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am','More stuff','And yet more stuff', 'final cell'],
            ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am','More stuff','And yet more stuff', 'final cell'],
            ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am','More stuff','And yet more stuff', 'final cell'],
            ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am','More stuff','And yet more stuff', 'final cell'],
            ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am','More stuff','And yet more stuff', 'final cell'],
            ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am','More stuff','And yet more stuff', 'final cell'],
            ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am','More stuff','And yet more stuff', 'final cell'],
            ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am','More stuff','And yet more stuff', 'final cell'],
            ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am','More stuff','And yet more stuff', 'final cell'],
            ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am','More stuff','And yet more stuff', 'final cell'],
            ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am','More stuff','And yet more stuff', 'final cell']
        ];
    
        // example of custom renderer function
        function change(val){
            if(val > 0){
                return '<span style="color:green;">' + val + '</span>';
            }else if(val < 0){
                return '<span style="color:red;">' + val + '</span>';
            }
            return val;
        }
    
        // example of custom renderer function
        function pctChange(val){
            if(val > 0){
                return '<span style="color:green;">' + val + '%</span>';
            }else if(val < 0){
                return '<span style="color:red;">' + val + '%</span>';
            }
            return val;
        }
    
        // create the data store
        var store = new Ext.data.SimpleStore({
            fields: [
               {name: 'company'},
               {name: 'price', type: 'float'},
               {name: 'change', type: 'float'},
               {name: 'pctChange', type: 'float'},
               {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
               {name: 'one'},
               {name: 'two'},
               {name: 'three'}
            ]
        });
        store.loadData(myData);
    
        // create the Grid
        var grid = new Ext.grid.GridPanel({
            store: store,
            columns: [
                {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
                {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
                {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
                {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
                {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'},
                {header: "One", width: 160, sortable: true, dataIndex: 'one'},
                {header: "two", width: 160, sortable: true, dataIndex: 'two'},
                {header: "three", width: 160, sortable: true, dataIndex: 'three'}
            ],
            stripeRows: true,
            autoExpandColumn: 'company',
            height:350,
            width:600,
            title:'Array Grid'
        });
    
        grid.render('grid-example');
    
        grid.getSelectionModel().selectFirstRow();
    });
    I'm not sure if this post is a similar issue or not, but I thought I'd point it out, http://extjs.com/forum/showthread.php?t=34508.
    Perhaps the same as http://extjs.com/forum/showthread.php?p=164001 , but I can't really tell by the description.

    Btw, great library guys. Really impressed.
    Attached Images
    Last edited by jbenetz; 12 May 2008 at 10:42 AM. Reason: more details

  2. #2
    Ext JS Premium Member
    Join Date
    Oct 2007
    Posts
    9
    Vote Rating
    0
    tpoon is on a distinguished road

      0  

    Default Reproducible in the unmodified Array Grid example also

    Reproducible in the unmodified Array Grid example also


    I ran into the same problem. I can reproduce it in the standard Array Grid example by doing the following:
    1. Resize the Last Updated column wider so that the horizontal scroll bar shows up.
    2. Scroll to the right.
    3. Resize the Last Updated column again. The column bodies become misaligned with the headers.

    See this screencast:

    Btw, this looks like an IE-only bug. It works fine in Firefox.

  3. #3
    Ext User
    Join Date
    Jul 2008
    Posts
    27
    Vote Rating
    0
    sami_user is on a distinguished road

      0  

    Default


    Hey jbenetz,

    Did you find a solution to this problem ?

    Regards,
    Sam

  4. #4
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    this is a duplicate of the following bug report:
    http://extjs.com/forum/showthread.php?t=34660

  5. #5
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    2
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    Fixed in SVN.