Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Grid infinite scroll: no last elements, no return to first elements

    Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-5457 in a recent build.
  1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    2

    Default Grid infinite scroll: no last elements, no return to first elements

    REQUIRED INFORMATION

    Ext version tested:

    • Ext 4.0.7
    • Ext 4.1 Beta 2

    Browser versions tested against:
    • Google Chrome 17.0.963.56 m
    • FF 10.0.2, FireBug 1.9.1

    DOCTYPE tested against:
    • None at all (as in examples folder)
    • HTML 5
    • HTML 4.1 Strict

    Description:

    Infinite grid example minimally converted to represent my application, fails in the following manner:

    • Then I scroll down, last elements are never ever downloaded from server
    • Even from downloaded ones, last are not displayed: totalCount = 65, last query is 30-59, last seen is 52 if scrolled smooth, with 53 seen as letter tops below the lower border of window. If i scroll harsh
    • As i scroll back to top, the 0-th iten is never shown again, minimally 1 is shown if i scroll smoothly, maximally 8 if i "ram" the scrollbar


    Steps to reproduce the problem:
    • Copy provided infinite-scroll.js and list.php into examples folder grid, or make new grid-scroll-bug
    • Browse to it

    The result that was expected:

    • Grid fully scrollable, artificial users seen from 0 to 64 or 65

    The result that occurs instead:
    • Artificial users are seen to 52 at maximum, 53 cut by window edge
    • Can never scroll back to artificial user 0, minimum 1 only can be seen

    Test Case:

    infinite-scroll.js
    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('ModelUser', {
            extend: 'Ext.data.Model',
            fields: ['name', 'email']
        });
    
        // create the Data Store
        var store = Ext.create('Ext.data.Store', {
            id: 'store',
            pageSize: 30,
            model: 'ModelUser',
            remoteSort: true,
            // allow the grid to interact with the paging scroller by buffering
            buffered: true,
            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: 'ajax',
                extraParams: {
                    total: 50000
                },
            api: {
                read: 'list.php'
            },
                reader: {
                    type: 'json',
                root: 'users',
                successProperty: 'success',
                    totalProperty: 'totalCount'
                },
                // sends single sort as multi parameter
                simpleSortMode: true
            },
            sorters: [{
                property: 'lastpost',
                direction: 'DESC'
            }]
        });
    
        var grid = Ext.create('Ext.grid.Panel', {
            width: 700,
            height: 500,
            title: 'ExtJS.com - Browse Forums',
            store: store,
            verticalScrollerType: 'paginggridscroller',
            loadMask: true,
            disableSelection: true,
            invalidateScrollerOnRefresh: false,
            viewConfig: {
                trackOver: false
            },
            // grid columns
            columns:[
            {
                header: 'Name',
                dataIndex: 'name',
                flex: 1,
                editor: {
                    xtype: 'textfield'
                }
            },
    
            {
                header: 'Email',
                dataIndex: 'email',
                flex: 1
            }],
            renderTo: Ext.getBody()
        });
    
        // trigger the data store load
        store.guaranteeRange(0, 29);
    });
    list.php
    Code:
    <?php
    
    $response = array(
        'success' => 'true',
        'users' => array(),
        'totalCount' => 65,
    );
    
    $start = $_GET['start'];
    $limit = $_GET['limit'];
    
    for ($i = 0; $i < $limit; $i++) {
        $n = $start + $i;
        $response['users'][] = array(
            'name' => "Name-{$n}",
            'email' => "email-{$n}@nowhere.org"
        );
    }
    
    echo json_encode($response);

    HELPFUL INFORMATION

    Screenshot or Video:
    • attached

    See this URL for live test case: http://

    Debugging already done:

    • none

    Possible fix:
    • not provided

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

    Operating System:
    • Microsoft Windows XP [Ver 5.1.2600] Home Edition, SP3

    Extra note:
    • On Ext 4.1 Beta 2, the example fails completely, showing only empty grid with headers. Adding 'autoLoad: true' to the store loads only first page but no scrolling happens, no further debug attempted. Is this an interface breakage by design, or beta bug ?

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

    Default

    I don't see prefetch being executed.
    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
    Sencha User
    Join Date
    Feb 2012
    Posts
    2

    Default

    Quote Originally Posted by mitchellsimoens View Post
    I don't see prefetch being executed.
    I don't fully understand what the 'prefetch' is and why is it important for this case, "Ext.data.Store" documentation only explains the obvious about it. Did I overlook something ?

    I blindly copypasted from the beta2 example, changing
    Code:
    // trigger the data store load
        store.guaranteeRange(0, 29);
    for
    Code:
        store.prefetch({
            start: 0,
            limit: 99,
            callback: function() {
                store.guaranteeRange(0, 49);
            }
        });
    - nothing changed to better or worse, even with pushing limits up to 999 or cutting down to 29.

    P.S. Pushing pageSize to 200 solves the problem with end elements (totalCount is 234 and 1234), but 0-th element can be scrolled back only with 1234 lines - time to time, if moving scrollbar back and forth, by it's rails or table box, slow and fast by trial, but sometimes up-scrolling stops by 9 or even 36.

    P.S.2 What info exactly is missing ? I will gather. But don't expect me writing automated unit tests for graphic stuff - i'm not so experienced, rather jQuery assembly-line monkey seeking for something more well-founded.

  4. #4
    Sencha User dongryphon's Avatar
    Join Date
    Jul 2009
    Location
    Kansas
    Posts
    1,748

    Default

    I believe we have an internal bug for this (EXTJSIV-5268), but I wanted to link your report and example with a ticket.
    Don Griffin

    "Use the source, Luke!"

  5. #5
    Sencha User dongryphon's Avatar
    Join Date
    Jul 2009
    Location
    Kansas
    Posts
    1,748

    Default

    Thanks for the detailed bug report.
    Don Griffin

    "Use the source, Luke!"

  6. #6
    Sencha Premium Member
    Join Date
    Jan 2012
    Location
    Lahore
    Posts
    53

    Default Any updates about this issue.

    facing the same problem.

    EXT JS:
    Version 4.0.7

  7. #7
    Sencha Premium Member
    Join Date
    Jan 2012
    Location
    Lahore
    Posts
    53

    Default

    Did some body found an over ride / workaround or a tweak to avoid this issue for now?

  8. #8

    Default

    I have the same problem, somebody could resolve?

  9. #9
    Sencha Premium Member
    Join Date
    Jan 2012
    Location
    Lahore
    Posts
    53

    Default

    I wish if Condor or Animal or any one from community support can give us any hint on this thread, and we can stop banging our heads with Google

    If 4.1 is the answer does any body now what would be the cost of shifting from 4.0 to 4.1 ? I mean will it be same hectic as from Ext 3.x becuase I have read in some other threads that there are 'significant changes' so I am very worried, I cannot make a fine piece of software with this bug.
    EXT Js Developer

  10. #10
    Sencha Premium User
    Join Date
    Jun 2011
    Location
    Seattle, WA
    Posts
    33

    Exclamation Need solution

    I'd love to know the solution too - we cannot upgrade away from 4.0.7, but we can easily apply code fixes.

Page 1 of 2 12 LastLast

Posting Permissions

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