Results 1 to 8 of 8

Thread: [4.1.0] Locked columns in infinite grid break scroll synchronization

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Ext JS Premium Member
    Join Date
    Dec 2011
    Posts
    23

    Default [4.1.0] Locked columns in infinite grid break scroll synchronization

    REQUIRED INFORMATION

    Ext version tested:
    • Ext 4.1.0


    Browser versions tested against:
    • Chrome 18
    • FF11 (firebug 1.9.1 installed)


    Description:
    When using infinite grid with locked columns :
    • Selected line become desynchro when scrolling
    • Bottom spacer is missing


    Steps to reproduce the problem:
    • Copy infinite grid example
    • Insert a locked column (eg. {xtype: 'rownumberer', locked: true, width: 50, sortable: false} ) in first position.
    • Scroll dragging vertical scrollbar to middle
    • Select a row in right part of grid



    The result that was expected:
    • Fisrt and second columns are showing row number, they must show same number on same row.


    The result that occurs instead:
    • Fisrt and second columns aren't synchronous : selected row is cut in two parts.



    Test Case:
    Code:
    Ext.Loader.setConfig({enabled: true});
    
    Ext.Loader.setPath('Ext.ux', '../ux/');
    Ext.require([
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.util.*',
        'Ext.grid.PagingScroller'
    ]);
    
    Ext.onReady(function(){
        Ext.define('ForumThread', {
            extend: 'Ext.data.Model',
            fields: [
                'title', 'forumtitle', 'forumid', 'username', {
                    name: 'replycount',
                    type: 'int'
                }, {
                    name: 'lastpost',
                    mapping: 'lastpost',
                    type: 'date',
                    dateFormat: 'timestamp'
                },
                'lastposter', 'excerpt', 'threadid'
            ],
            idProperty: 'threadid'
        });
    
        // create the Data Store
        var store = Ext.create('Ext.data.Store', {
            id: 'store',
            model: 'ForumThread',
            remoteSort: true,
            // allow the grid to interact with the paging scroller by buffering
            buffered: true,
            pageSize: 100,
            proxy: {
                // load using script tags for cross domain, if the data in on the same domain as
                // this page, an HttpProxy would be better
                type: 'jsonp',
                url: 'http://www.sencha.com/forum/remote_topics/index.php',
                reader: {
                    root: 'topics',
                    totalProperty: 'totalCount'
                },
                // sends single sort as multi parameter
                simpleSortMode: true
            },
            sorters: [{
                property: 'lastpost',
                direction: 'DESC'
            }],
            autoLoad: true
        });
    
        function renderTopic(value, p, record) {
            return Ext.String.format(
                '<a href="http://sencha.com/forum/showthread.php?t={2}" target="_blank">{0}</a>',
                value,
                record.data.forumtitle,
                record.getId(),
                record.data.forumid
            );
        }
    
        var grid = Ext.create('Ext.grid.Panel', {
            width: 700,
            height: 500,
            collapsible: true,
            title: 'ExtJS.com - Browse Forums',
            store: store,
            loadMask: true,
            selModel: {
                pruneRemoved: false
            },
            multiSelect: true,
            viewConfig: {
                trackOver: false
            },
            // grid columns
            columns:[{
                xtype: 'rownumberer',
                locked: true,
                width: 50,
                sortable: false
            },{
                xtype: 'rownumberer',
                width: 50,
                sortable: false
            },{
                tdCls: 'x-grid-cell-topic',
                text: "Topic",
                dataIndex: 'title',
                width: 450,
                renderer: renderTopic,
                sortable: false
            },{
                text: "Author",
                dataIndex: 'username',
                width: 100,
                hidden: true,
                sortable: true
            },{
                text: "Replies",
                dataIndex: 'replycount',
                align: 'center',
                width: 70,
                sortable: false
            },{
                id: 'last',
                text: "Last Post",
                dataIndex: 'lastpost',
                width: 130,
                renderer: Ext.util.Format.dateRenderer('n/j/Y g:i A'),
                sortable: true
            }],
            renderTo: Ext.getBody()
        });
    });
    HELPFUL INFORMATION

    Screenshot or Video:


    Debugging already done:
    • No


    Possible fix:
    • Not provided


    Additional CSS used:
    • only default ext-all.css


    Operating System:
    • Win7 Enterprise SP1

  2. #2
    Sencha User
    Join Date
    May 2009
    Posts
    158

    Default

    May be related to a bug I posted yesterday. If you inspect the locked grid, is the grid-spacer above the actual grid?

  3. #3
    Ext JS Premium Member
    Join Date
    Dec 2011
    Posts
    23

    Default

    Quote Originally Posted by ZachG View Post
    May be related to a bug I posted yesterday. If you inspect the locked grid, is the grid-spacer above the actual grid?
    No, there isn't any spacer.

    Locked top infinite grid.jpg

  4. #4
    Sencha User
    Join Date
    Sep 2008
    Posts
    28

    Default Spacer disappears after column sort

    I've run into the same spacer problem. It can be seen on Sencha's own "Locking Grid Column Example". Looks fine with the spacer at the bottom when the page is first rendered but once you sort on any column the spacer disappears and it looks okay until you scroll to the bottom and then things are mis-aligned. Same for Chrome 19, Firefox 12, & IE9.

  5. #5
    Sencha User
    Join Date
    Sep 2008
    Posts
    28

    Default Possible fix

    I searched through the code and finally arrived at a function called onLockedViewRefresh() which is very similar to the onNormalViewRefresh() function but onNormalViewRefresh was calling me.updateSpacer() while onLockedViewRefresh was not. I added it and it is now maintaining the spacer after I do any column sorts. Perhaps it will help with other issues but I'm not sure it is the appropriate solution.....

  6. #6
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    Default

    I have some code pending a merge that should hopefully make it into 4.1.1. Here's your test case on that branch: http://screencast.com/t/eLEyhgut
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  7. #7
    Ext JS Premium Member
    Join Date
    Dec 2011
    Posts
    23

    Default

    Quote Originally Posted by evant View Post
    I have some code pending a merge that should hopefully make it into 4.1.1. Here's your test case on that branch: http://screencast.com/t/eLEyhgut
    It seems great. Thanks!

  8. #8
    Sencha Premium Member
    Join Date
    Mar 2009
    Posts
    14

    Default

    Hi Evant,
    Apparently the fix hasn't got in even for 4.1.3. Can you please provide a link to the fix or suggest it in here?
    Thanks!

Tags for this Thread

Posting Permissions

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