Results 1 to 4 of 4

Thread: buffered store breaks grid if pagesize is multiply of total records

    This issue duplicates another issue.
  1. #1

    Default buffered store breaks grid if pagesize is multiply of total records

    REQUIRED INFORMATION




    Ext version tested:
    • Ext 4.2.1 rev 883

    Browser versions tested against:
    • ____
    • Chrome
    • Firefox

    DOCTYPE tested against:
    • ____

    Description:
    • If the total amount of records in a buffered store is a multiply of the pagesize, the last record in the grid will never show.
      If you completely scroll down and after that do some more scrolling, it will mess up the whole grid and gives a lot of javascript errors as well.
    Code:
    <!DOCTYPE html>
    
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Infinite Scroll Grid Test</title>
    
    
        <script type="text/javascript" src="~/Scripts/ext-4.2.1/ext-all-debug.js"></script>
        <link href="~/resources/ext-4.2.1/css/ext-all-neptune.css" rel="stylesheet" type="text/css" />
    
    
        <script type="text/javascript">
    
    
            Ext.require([
                'Ext.grid.*',
                'Ext.data.*',
                'Ext.util.*',
                'Ext.grid.plugin.BufferedRenderer'
            ]);
    
    
            Ext.onReady(function () {
                Ext.define('Contact', {
                    extend: 'Ext.data.Model',
                    idProperty: 'ID',
                    fields: [
                        {
                            name: 'ID'
                        },
                        {
                            name: 'FirstName'
                        },
                        {
                            name: 'LastName'
                        },
                        {
                            name: 'City'
                        },
                        {
                            name: 'Street'
                        }
                    ]
    
    
                });
    
    
    
    
                Ext.define('Contacts', {
                    extend: 'Ext.data.Store',
                    model: 'Contact',
                    autoLoad: true,
                    buffered: true,
                    pageSize: 100,
    
    
                    
                    proxy: {
                        type: 'rest',
                        url: '/contact', /* Service URL here*/
                        reader: {
                            root: 'List'
                        }
                    }
    
    
    
    
                });
    
    
                var store = Ext.create('Contacts');
    
    
                var vp = Ext.create('Ext.container.Viewport', {
                    layout: 'fit',
                    items: [Ext.create('Ext.grid.Panel', {
                        layout: 'fit',
                        store: store,
    
    
                        loadMask: true,
                        selModel: {
                            pruneRemoved: false
                        },
    
    
                        viewConfig: {
                            trackOver: false
                        },
    
    
                        columns: [{
                            xtype: 'rownumberer',
                            width: 50,
                            sortable: false
                        },
                        {
                            dataIndex: 'FirstName',
                            sortable: true,
                            flex: 1,
                            header: 'First name'
                        },
                        {
                            dataIndex: 'LastName',
                            sortable: true,
                            flex: 1,
                            header: 'Last name'
                        },
                        {
                            dataIndex: 'Street',
                            sortable: true,
                            flex: 1,
                            header: 'Street'
                        },
                        {
                            dataIndex: 'City',
                            sortable: true,
                            flex: 1,
                            header: 'City'
                        }]
                    })]
                });
            });
        
        </script>
    </head>
    <body></body>
    </html>
    Server:

    public MList<Contact> Get(int? start, int? limit) {

    var results = new List<Contact>();
    for (int i = 1; i <= 2500; i++) {
    results.Add(GetContactBasis(i));
    }
    var filteredResults = results.ToList();
    if (start.HasValue) filteredResults = filteredResults.Skip(start.Value).ToList();
    if (limit.HasValue) filteredResults = filteredResults.Take(limit.Value).ToList();
    var r = new MList<Contact>() {
    List = filteredResults,
    total = 2500
    };
    return r;
    }
    private Contact GetContactBasis(int id) {
    return new Contact() {
    ID = id,
    FirstName = string.Format("First name {0}", id),
    LastName = string.Format("Last name {0}", id),
    Street = string.Format("Street {0}", id),
    City = string.Format("City {0}", id)
    };
    }
    Last edited by basderaad; 12 Jun 2013 at 10:36 PM. Reason: template, code example

  2. #2
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165

    Default

    Can you offer a code example that demonstrates the issue you're seeing?

  3. #3

    Default

    I've added my code.
    I'm using asp.net web api for the service but it prob doesn't matter what server you use.

  4. #4

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
  •