Results 1 to 4 of 4

Thread: [4.1.0] Collapsed infinite grid has incorrect vertical scrollbar size

    Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-6053 in 4.1.1.
  1. #1
    Ext JS Premium Member
    Join Date
    Dec 2011
    Posts
    23

    Default [4.1.0] Collapsed infinite grid has incorrect vertical scrollbar size

    REQUIRED INFORMATION

    Ext version tested:

    • Ext 4.1.0


    Browser versions tested against:

    • Chrome 18
    • FF11 (firebug 1.9.1 installed)


    Description:

    • Infinite grid vertical scrollbar height is calculated from total record count. It works fine when grid is visible.
      But when grid isn't visible, like in a collasped region of a border layout panel, the height is incorrect and it's impossible to scroll all records.


    Steps to reproduce the problem:

    • Put infinite grid example in a collapsed region
    • Expand region by mouse


    The result that was expected:

    • Same scrollbar size as standard infinite grid example


    The result that occurs instead:

    • Vertical scrollbar is too long
    • Cannot scroll all records
    • Moreover, strange painting of grid (this doesn't occur on our website)


    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: 300,
            collapsible: true,
            title: 'ExtJS.com - Browse Forums',
            store: store,
            loadMask: true,
            selModel: {
                pruneRemoved: false
            },
            multiSelect: true,
            viewConfig: {
                trackOver: false
            },
            // grid columns
            columns:[{
                xtype: 'rownumberer',
                width: 50,
                sortable: false
            },{
                tdCls: 'x-grid-cell-topic',
                text: "Topic",
                dataIndex: 'title',
                flex: 1,
                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
            }],
            region: 'east',
            collapsed: true
        });
        
        var panel = Ext.create('Ext.panel.Panel', {
            width: 700,
            height: 500,
            layout: 'border',
            items: [grid, {xtype:'panel', region:'center'}],
            renderTo: Ext.getBody()
        });
        
        // with grid -> collapsed: false and this line, it works correctly
        //grid.collapse();
      
    });

    HELPFUL INFORMATION


    Screenshot or Video:

    • Left screenshot is standard infinite grid example
    • Right screenshot
      is from above code

    Infinite grid collapsed.jpg

    Debugging already done:

    • none


    Possible fix:

    • not provided


    Additional CSS used:

    • only default ext-all.css


    Operating System:

    • Win7 Enterprise

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    Thanks for the report.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

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

    Default Possible solution

    I'm trying to edit my post but "Save" button doesn't work.

    For scroll size problem :

    Debugging already done:


    • Ext.grid.PagingScroller.getScrollHeight is call when grid isn't visible and FirstRow.getHeight(false, true); returns 0



    Possible fix:


    • Add 0 value test
      Code:
          //me.rowHeight = firstRow.getHeight(false, true);
          /* MOD : If grid isn't visible returns 0, and then never calculated again */
          var rowHeight = firstRow.getHeight(false, true);
          if (rowHeight  != 0)
              me.rowHeight = rowHeight ;
          /* END MOD */;

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    A workaround would be to configure the grid with

    Code:
    deferRowRender: false
    deferRowRender is only really useful when the Store is preloaded with data anyway, and you need to defer the expense of row rendering until after the grid's render + layout run.

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
  •