[CLOSED] Error in buffered grid

  1. #1

    [CLOSED] Error in buffered grid

    Hi guys,

    I am opening a new thread as my previous thread was mark closed before i was able to reproduce the issue. I have a fully working sample to reproduce now.. Please see below.

    Hi guys,

    I am getting the error below using the buffered grid:

    JavaScript runtime error: Ext.Base.getRange(): PageMap asked for range which it does not have
    Please offer some assistance. We are about to release our product and started seeing this issue.

    we are using ext.net version : 2.2.0.41185


    See: http://forums.ext.net/showthread.php...-buffered-grid


    To trigger the error, just move mouse over grid after it loads.




    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        <meta content="NO-CACHE" http-equiv="CACHE-CONTROL" />
        <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
         <script src="/Scripts/GridView.js" type="text/javascript"></script>
    </head>
    <body>
        <ext:ResourceManager runat="server">
            <Listeners>
            </Listeners>
        </ext:ResourceManager>
        <ext:Viewport ID="viewportResultView" runat="server" Layout="Fit" IDMode="Static">
            <Items>
                  <ext:GridPanel ID="GridPanel1" runat="server">
                    <Store>
                        <ext:Store ID="Store1" runat="server">
                            <Model>
                                <ext:Model  runat="server">
                                    <Fields>
                                        <ext:ModelField Name="test" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <ColumnModel  runat="server">
                        <Columns>
                            <ext:Column  runat="server" Text="Test" DataIndex="test" />
                        </Columns>
                    </ColumnModel>
                    <Features>
                    </Features>
                </ext:GridPanel>
            </Items>
            <Listeners>
                <Render Fn="GridView.InitializeView" />
            </Listeners>
        </ext:Viewport>
    </body>
    </html>


    GridView = {
    
        InitializeView: function () {
    
            GridView.CreateGrid();
        },
    
        CreateGrid: function() {
    
    
            Ext.define('mymodel', {
                extend: 'Ext.data.Model',
                fields: [{ name: 'Firstname', type: 'string' }, { name: 'Lastname', type: 'string' }, { name: 'Age', type: 'int' }],
                idProperty: 'Age'
            });
    
            var store = Ext.create('Ext.data.JsonStore', {
                // store configs
                autoDestroy: true,
                remoteSort: true,
                remoteFilter: true,
                autoLoad: false,
                showWarningOnFailure: false,
                proxy: {
                    type: "ajax",
                    url: "/Grid/GetData",
                    timeout: 60000,
                    reader: {
                        root: "data",
                        type: "json",
                        totalProperty: 'totalCount',
                        messageProperty: "message"
                    },
                    extraParams: {
                        
                    },
                    groupParam: "Group",
                    limitParam: "PageSize",
                    pageParam: "PageIndex",
                    directionParam: "SortDirection",
                    sortParam: "Sort",
                    startParam: "Start",
                    listeners: {
                        exception: {
                            fn: function(el, response, operation, eOpts) {
    
    
                            }
                        }
                    }
                },
                buffered: true,
                model: 'mymodel',
                pageSize: 100,
                listeners: {
                    beforeload: {
                        fn: function(store, operation, eOpts) {
                            //Apply additional filter params
    //                        Ext.apply(store.getProxy().extraParams, {
    //                            WorkflowId: 1,
    //                            WorkflowStateId: 2,
    //                            SearchFilterCondition: null,
    //                            FilterCondition: null,
    //                            ResetCache: true
    //                        });
    
                        }
                    },
                    prefetch: {
                        fn: function(store, records, successful, operation, eOpts) {
                        }
                    },
                    exception: {
                        fn: function(el, response, operation, eOpts) {
                        }
                    }//end exception
                }
            });
    
            var columns = [];
    
            columns.push({ text: 'First Name', dataIndex: 'Firstname', sourceIndex: "Firstname" });
            columns.push({ text: 'Last Name', dataIndex: 'Lastname', sourceIndex: "Lastname" });
            columns.push({ text: 'Age', dataIndex: 'Age', sourceIndex: "Age" });
    
    //        var filtersCfg = {
    //            ftype: 'filters',
    //            autoReload: false, //don't reload automatically
    //            local: true, //only filter locally
    //            // filters may be configured through the plugin,
    //            // or in the column definition within the headers configuration
    //            filters: [{
    //                    type: 'string',
    //                    dataIndex: 'Firstname'
    //                }, {
    //                    type: 'string',
    //                    dataIndex: 'Lastname'
    //                }]
    //        };
    
    
            var selModel = Ext.create('Ext.selection.CheckboxModel', {
                checkOnly: true,
                pruneRemoved: false,
                mode: 'MULTI',
                showHeaderCheckbox: true,
                listeners: {
                    
                }
            });
    
    
            var grid = Ext.create('Ext.grid.Panel', {
                border: false,
                store: store,
                selModel: selModel,
                columns: columns,
                viewConfig: {
                    trackOver: true,
                    loadingText: "",
                    stripeRows: true,
                    loadMask: false
                },
                plugins: [{
                            ptype: 'bufferedrenderer'
                        }],            
            });
    
            App.viewportResultView.suspendEvents(false);
            App.viewportResultView.removeAll();
            App.viewportResultView.insert(0, grid);
            App.viewportResultView.resumeEvents();
    
    
            store.loadPage(1);
        }
    }

        public class GridController : Controller
        {
            //
            // GET: /Grid/
    
            public ActionResult Index(string myuploader =null)
            {
                return View("Index");
            }
    
    
            public StoreResult GetData( string filter ="" , int Start = 0, int PageSize =1, int PageIndex = 1)
            {
              
    
                StoreResult response = new StoreResult();
    
                List<User> data = new List<User>();
    
                Random randow = new Random();
                DateTime now = DateTime.Now;
    
                for (int i = Start + 1; i <= 1487; i++)
                {
                    User user = new User()
                    {
                        Firstname = "User " + i,
                        Lastname = "User Last " + i,
                        Age = i + 23
                    };
    
                    data.Add(user);
                }
    
                response.Data = data;
                response.Total = 1487;
    
                return response;
            }
    
        }
    
        public class User
        {
            public String Firstname { get; set; }
    
            public String Lastname { get; set; }
    
            public int Age { get; set; }
        }
    Last edited by Daniil; Nov 25, 2013 at 3:06 PM. Reason: [CLOSED]
  2. #2
    Hello!

    Thank you for the example. Could you provide the steps and the browser to reproduce the issue?
  3. #3
    Hi,

    1) Run the sample to load the the data in the Gridpanel.
    2) Then hover mouse over grid.
    3) An unhandled javascript error will be thrown.

    Please let me know if you need futher instructions.

    I am using internet explorer 10.

    Click image for larger version. 

Name:	Windows Internet Explorer_2013-11-22_17-46-31.png 
Views:	6 
Size:	12.3 KB 
ID:	7259
  4. #4
    Thank you! I was able to reproduce the issue and it looks strange. We will investigate it.
  5. #5
    Hi everybody,

    I see two wrong things:

    1. This:
    for (int i = Start + 1; i <= 1487; i++)
    You return all the records for each page. It is wrong. You have to return the records for the requested page only. This way:
    for (int i = Start + 1; i <= Start + PageSize; i++)
    2. This:
    totalProperty: 'totalCount'
    Well, the StoreResult class is deserialized with "total". So, please set up
    totalProperty: 'total'
    or just remove, because "total" is by default.
  6. #6
    Thanks Danil,

    The following was in the sample was done in error. Thanks for pointing those issues out though. I was able to use the issue with the number of records being coming back to track down the issue that I was having.

    Thanks please mark thread a closed.

Similar Threads

  1. Replies: 3
    Last Post: Aug 02, 2018, 6:58 PM
  2. Replies: 5
    Last Post: Apr 27, 2016, 12:43 AM
  3. [CLOSED] Error in buffered grid
    By RCM in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Nov 22, 2013, 6:43 PM
  4. [CLOSED] Select Row in Buffered Grid
    By Patrick_G in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Feb 09, 2013, 6:00 PM
  5. [CLOSED] Buffered Grid with filtering and editing
    By jchau in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Jan 13, 2013, 6:39 AM

Posting Permissions