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

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


    Ext version tested:

    • Ext 4.1.0

    Browser versions tested against:

    • Chrome 18
    • FF11 (firebug 1.9.1 installed)


    • 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:

    Ext.Loader.setConfig({enabled: true});
    Ext.Loader.setPath('Ext.ux', '../ux/');
        Ext.define('ForumThread', {
            extend: '',
            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('', {
            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: '',
                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="{2}" target="_blank">{0}</a>',
        var grid = Ext.create('Ext.grid.Panel', {
            width: 300,
            collapsible: true,
            title: ' - Browse Forums',
            store: store,
            loadMask: true,
            selModel: {
                pruneRemoved: false
            multiSelect: true,
            viewConfig: {
                trackOver: false
            // grid 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


    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
    Gainesville, FL


    Thanks for the report.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:

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

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

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


    A workaround would be to configure the grid with

    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