Results 1 to 3 of 3

Thread: [4.1.2] Horizontal scroll alignment after reconfigure on locked grid

    You found a bug! We've classified it as EXTJS-7368 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    46
    Vote Rating
    5
      0  

    Default [4.1.2] Horizontal scroll alignment after reconfigure on locked grid

    REQUIRED INFORMATION Ext version tested:
    • Ext 4.1.2

    Browser versions tested against:
    • Safari 5.1.2 (Windows)
    • FF15
    • IE8

    DOCTYPE tested against:
    • Transitional

    Description:
    • After reconfiguring the columns of a grid with locked columns, and grouped column headers the header scrool and body scroll become out of sync. Scrolling all the way to the right seems fine, but when you begin to scroll back the body scrolls and the header doesn't initially causing the data and header to not be aligned.

    Steps to reproduce the problem:
    • See code below

    The result that was expected:
    • body and header scroll together!

    The result that occurs instead:
    • body scrolls and header remains fixed

    Test Case:
    Code:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
        <title></title>
        <meta http-equiv="X-UA-Compatible" content="IE=8" />
        
        
        <link href="extjs-4.1.2/resources/css/ext-all-gray.css" rel="Stylesheet" type="text/css" media="screen, print, projection" />
        <script src="extjs-4.1.2/ext-all-debug.js" type="text/javascript"></script>
        <script>
            (function () {
                Ext.onReady(function () {
                    var genCols = function (numLocked, numHidden) {
                        var cols = [],
                            totalCols = 7,
                            numNested = 3,
                            i = 0, j = 0;
    
                        for (; i < numLocked; i++) {
                            cols.push({
                                text: 'LockedColumn' + i,
                                locked: true,
                                dataIndex: (i == 0) ? 'DisplayField' : 'ValueField'
                            });
                        }
    
                        i = 0;
                        for (; i < totalCols; i++) {
                            var outterColum = {
                                text: 'OuterColumn' + i,
                                columns: [],
                                hidden: (i <= numHidden)
                            };
                            for (; j < numNested; j++) {
                                outterColum.columns.push({
                                    text: 'CnnerColumn' + i,
                                    dataIndex: 'ValueField'
                                });
                            }
                            j = 0;
                            cols.push(outterColum);
                        }
    
                        return cols;
                    };
    
                    var genData = function (numRecords, numGroups) {
                        var data = [],
                            i = 0,
                            recsPerGrp = Math.floor(numRecords / numGroups),
                            grpCnt = 0;
                        for (; i < numRecords; i++) {
                            if (i % recsPerGrp == 0) {
                                grpCnt++;
                            }
                            data.push({
                                DisplayField: 'Row' + i,
                                GroupField: 'Group' + grpCnt,
                                ValueField: Math.floor(Math.random() * 100)
                            });
                        }
                        return data;
                    };
    
                    var str = Ext.create('Ext.data.Store', {
                        fields: [
                            'DisplayField',
                            'GroupField',
                            'ValueField'
                        ],
                        groupField: 'GroupField',
                        data: genData(100, 7)
                    });
    
                    Ext.create('Ext.container.Viewport', {
                        renderTo: Ext.getBody(),
                        layout: 'border',
                        id: 'vwport',
                        items: [{
                            xtype: 'panel',
                            region: 'west',
                            width: 200,
                            layout: 'anchor',
                            title: 'West Panel',
                            collapsible: true,
                            items: [{
                                xtype: 'button',
                                anchor: '100%',
                                text: 'Hide First Columnset',
                                handler: function () {
                                    this.up('#vwport').down('grid').reconfigure(str, genCols(2, 1));
                                }
                            }]
                        }, {
                            xtype: 'grid',
                            region: 'center',
                            selType: 'rowmodel',
                            store: str,
                            columns: genCols(2, 0),
                            columnLines: true,
                            features: [{
                                id: 'group',
                                ftype: 'groupingsummary',
                                groupHeaderTpl: '{name}',
                                hideGroupedHeader: true,
                                enableGroupingMenu: false
                            }]
                        }]
                    });
    
                });
            })();
        </script>
        
    </head>
    <body>
    
    </body>
    </html>

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,411
    Vote Rating
    1290
      0  

    Default

    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3
    Sencha User
    Join Date
    Jul 2016
    Posts
    1
    Vote Rating
    0
      0  

    Default

    Hi,

    I also encountered a similar issue.

    browser: IE10
    extjs version: 4.2.1

    This is the workaround I came up with. Hope it helps.

    Code:
    var gridView = Ext4.get(Ext4.query('.x4-grid-view')[0]);
    gridView.dom.scrollLeft = gridView.dom.scrollWidth;
    gridView.dom.scrollLeft = 0;

Posting Permissions

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