Results 1 to 9 of 9

Thread: Buffered Store example, Extjs 6.

  1. #1
    Sencha Premium Member
    Join Date
    Feb 2015
    Posts
    39
    Answers
    1

    Default Buffered Store example, Extjs 6.

    Hello,
    I'am trying to use buffered Store to load a large Json server-side data 'more than 1000 records'.
    Code:
    Ext.create('Ext.data.BufferedStore', {
        id: 'store',
        fields: ['ID', 'WorkflowName', 'Title', 'Priority', 'Status', 'AssignedTo', 'Body', 'StartDate', 'DueDate', 'Template_x0020_Description', 'ItemId', 'TaskCTName', 'itemshortname', 'itemname', 'idate'],
        pageSize: 50,
        leadingBufferZone: 1000,
        buffered :true,
        proxy: {
            type: 'ajax',
            url: 'ViewEngine/LoadTasksGridData',
            reader: {
                type: 'json'
            }
        },
        autoLoad: true
    });
    Please find below the data redundancy (I set pageSize = 5 to make redundancy more visible).
    You can notice it by looking at the ID column.
    Capture.PNG
    Thank you.

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

    Default

    A buffered store will load small pages of data when that page is scrolled into view. Check out the network tab in the browser developer tools to see the many requests being fired. Each request should have the paging params (start, page, limit) that your server side code should adhere to.
    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 Premium Member
    Join Date
    Feb 2015
    Posts
    39
    Answers
    1

    Default

    The fired requests seems proper..

    Capture1.PNG

    What do you think of the store configuration? is it right?
    Thank you

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

    Default

    The store config is technically fine, your server just needs to use those paging params to return the proper data for that requested page of data.

    Although, you likely have quite a ton of requests going on which is going to negatively affect performance. If you have 200 requests pending, not all requests will be active, you simply don't have that many network sockets available. I'd have a much larger pageSize on the store.
    Mitchell Simoens @LikelyMitch

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

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

  5. #5
    Sencha Premium Member
    Join Date
    Feb 2015
    Posts
    39
    Answers
    1

    Default

    Hi, Is it possible to activate remote fetching Data (send an ajax request when the scroll down reach the limit page size) ? Thank You

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

    Default

    What is not loaded, when you scroll the grid will automatically be requested from the server. You have leadingBufferZone set to 1000 which means the grid will ask the store to load an extra 1,000 records that are below what rows would be visible. So you should have the # rows visible and also 1,000 rows below that.
    Mitchell Simoens @LikelyMitch

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

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

  7. #7
    Sencha Premium Member
    Join Date
    Feb 2015
    Posts
    39
    Answers
    1

    Default

    Quote Originally Posted by mitchellsimoens View Post
    What is not loaded, when you scroll the grid will automatically be requested from the server.
    Totally agree,
    But actually when scrolling the grid, there is no new fired requests .

    Otherwise the server response should contain all of the data or only the data that meets sent params (page, start, limit )??

    thanks

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

    Default

    The reason you probably don't see fired requests as you scroll is because of the number of requests at startup. Like I said, you have leadingBufferZone set to 1,000 which means under what you see in the grid, there are 1,000 rows already loaded.

    Yes, as I have said before, your server needs to return the proper requested data making use of the paging parameters (limit, page, start).
    Mitchell Simoens @LikelyMitch

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

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

  9. #9
    Sencha Premium User
    Join Date
    Dec 2015
    Posts
    16

    Default

    Hi,

    In order to reproduce the Buffered store issue I implemented a sample please find the frontend code below:
    Code:
    Ext.onReady(function () {        Ext.define('workflow', {
                extend: 'Ext.data.Model',
                fields: [
                    'ID', 'WorkflowName'
                ],
                idProperty: 'ID'
            });
    
    
            var store=   Ext.create('Ext.data.BufferedStore', {
                storeId: 'store',
                model: 'workflow',
                leadingBufferZone: 200,
                pageSize: 5,
                fields: [
                    'ID',
                    'WorkflowName'
                ],
                proxy: {
                    type: 'ajax',
                    url: '/Home/GetData',
                    reader: {
                      type: 'json'
                    },
                },
                autoLoad: true,            
            });
            Ext.create('Ext.grid.Panel', {
                renderTo: Ext.getBody(),
                store: store,
                columns: [
                  {
                      text: 'ID',
                      dataIndex: 'ID',
                      xtype: 'gridcolumn',
                      flex: 1
                  },
                  {
                      text: 'Workflow Name',
                      dataIndex: 'WorkflowName',
                      xtype: 'gridcolumn',
                      flex: 1
                  }
                ],
                verticalScrollerType: 'paginggridscroller',
                loadMask: true,
                frame: false,
                height: 300,
                width : 600,
                id: 'tasks_list',
            })
        });
    Server side code:
    Code:
            public ContentResult GetData(int start,int limit)
            {
                DataTable dt = new DataTable();
                DataColumn id = new DataColumn("ID");
                DataColumn workflowName = new DataColumn("WorkflowName");
                dt.Columns.Add(id);
                dt.Columns.Add(workflowName);
                for (int i = 0; i < 200; i++)
                {
                    DataRow nRow = dt.NewRow();
                    nRow["ID"] = i;
                    nRow["WorkflowName"] = "Workflow" + i;
                    dt.Rows.Add(nRow);
                }
                ContentResult cr = new ContentResult();
                IEnumerable<DataRow> query = from row in dt.AsEnumerable()
                                             select row;
                int total = query.ToList().Count;
                if (start > total)
                    start = 0;
                query = query.Skip(start).Take(limit);
                DataTable boundTable = query.CopyToDataTable<DataRow>();
                cr.Content = JsonConvert.SerializeObject(boundTable);
                return cr;
            }
    The gridpanel is displayed without scroll bar, below a print screen:
    Untitled1.png
    Why the gridpanel is displayed without the scrollbar?

Similar Threads

  1. Replies: 2
    Last Post: 25 Sep 2015, 7:56 AM
  2. EXTJS 4.2: Buffered store with editor grid
    By navr84 in forum Ext: Q&A
    Replies: 3
    Last Post: 21 Jan 2014, 6:56 AM
  3. Replies: 1
    Last Post: 18 Jun 2013, 2:39 PM
  4. [ExtJs 4.1.2] Buffered store getTotalCount() after remove
    By dvoracekPDS in forum Sencha Ext JS Q&A
    Replies: 2
    Last Post: 30 Oct 2012, 4:36 AM

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
  •