Results 1 to 7 of 7

Thread: Paging grid data

  1. #1
    Sencha User
    Join Date
    Dec 2015
    Location
    Norther Virginia
    Posts
    15

    Default Answered: Paging grid data

    Hi All,

    I am looking for someone to point me in the right direction as far a paging content. The working examples just seem to assume you are an expert with extjs. I mean you look at the documentation and then the working sample is way more complex than the documentation, I just don't get why.

    Anyhow, im trying to paginate a grid from an sql query that returns in json with a 100 rows of data. Ive used pageSize, dumbed down my store creation method and changed my code 100 times over but for some reason it always shows all 100 rows and the paging buttons do nothing. Please dont post a link to the documentation. Ive been there, done that, and wouldn't post here without trying it out first.

    Code:
    Ext.require([
        'Ext.data.*',
        'Ext.data.JsonStore',
        'Ext.grid.*',
        'Ext.container.*',
        'Ext.widget.*',
        'Ext.toolbar.Paging',
    ]);
    
    
    Ext.onReady(function(){
        
        Ext.define('Customer',{
            extend: 'Ext.data.Model',
            proxy: {
              type: 'ajax',
              reader: {
                  type: 'json',
              }
            },
            fields: [
                {name: 'Name', mapping: 'name'},
                {name: 'Email', mapping: 'email' },
                {name: 'Customer_ID', mapping: 'customer_id'}
            ]
        });
        
      var customers = Ext.create('Ext.data.Store', {
            model: 'Customer',
            autoload: true,
            pageSize: 25,
            proxy: {
              type: 'ajax',
              url: 'getCustomers.cfm',
              reader: {
                  type: 'json',
                  rootProperty: 'data',
                  totalProperty: 'total' }
            }
          });
     
     Ext.create('Ext.panel.Panel', {
        renderTo: Ext.getBody(),
        width: '100%',
        layout: { type: 'vbox', align: 'stretch', padding: 5},
        scrollable: true,
        title: 'Customer Information',
        items: [
            Ext.create('Ext.form.Panel', {
              bodyPadding: 10,
              layout: 'hbox',
              defaultType: 'textfield',
              items: [
                      
                    
                  { 
                      xtype: 'label',
                      forId: 'name',
                      text: 'Name',
                      margin: '4 10 0 0'
                  },
                  {
                      xtype: 'textfield',
                      name: 'name',
                      hideLabel: true,
                      margin: '0 10 0 0'
                  },
                  { 
                      xtype: 'label',
                      forId: 'email',
                      text: 'Email',
                      margin: '4 10 0 0'
                  },
                  {
                      xtype: 'textfield',
                      name: 'email',
                      hideLabel: true,
                      margin: '0 10 0 0'
                    
                  },
                  { 
                      xtype: 'label',
                      forId: 'customer_id',
                      text: 'Customer ID',
                      margin: '4 10 0 0'
                  },
                  {
                      xtype: 'textfield',
                      name: 'customer_id',
                      hideLabel: true,
                      margin: '0 10 0 0'
                      
                  },
                  {
                      xtype: 'button',
                      text: 'Submit',
                      name: 'submit'
                  }
                  
              ]
           }),
           Ext.create('Ext.grid.Panel', {
            store: customers,
            height: 535,
            columns: [
                { header: 'Name', dataIndex: 'Name', sortable: true },
                { header: 'Email', dataIndex: 'Email', flex: 1, sortable: true},
                { header: 'Customer_ID', dataIndex: 'Customer_ID', flex: 1, sortable: true }
            ],
            dockedItems: [{
            xtype: 'pagingtoolbar',
            store: customers,   // same store GridPanel is using
            dock: 'bottom',
            displayInfo: true
        }]
            
        })  
        ]
    });
    customers.load();
    });
    My json output comes in this format

    Code:
    {total:100, data: [ {name: 'Faulkner', email: '[email protected]', customer_id: '1679022278799'} ]}
    Once again, thanks in advance for any help.

  2. Hi--

    Sorry for the difficulties you're experiencing.

    The important thing to remember is that when you're doing remote paging with Ext JS grids, the AJAX request which is made for a "page" of data is *only* (and I stress ONLY) a handshake agreement between Ext JS and your server. Fundamentally, Ext JS doesn't "know" how much data you have...it is trusting that the "total" you send back is correct. Ext JS also assumes that you are sending back *only* the data for the requested page.

    So for example, let's use your 100 records as an example, with 10 records per page. Ext JS will expect that the response from the server comes back with at least the following:

    • A "total" field, telling the store how much data is in the remote data source. Again, it will not "validate" that this is correct, hence the "handshake" agreement
    • An array of data that matches the number expected for the requested page. So for example, if you have 100 total records and want the first page, the request for page 1 should return the 10 records of the first page.
    The second point above is crucial...again, your store is going to trust what it receives from the server. If you request page 1 of the 100 records which you've told the store your server has, the store is going to trust that you send back the first 10 records of the data set. If you send back 20 records, 50, or 100 records, it will simply assume that you have given it what it requested, and move along. The same is true for subsequent pages of data. Since your store doesn't inherently know what "page 2" of your data set looks like, it is going to trust that you return the correct 10 records when you request page 2.

    The same is true for sorting and filtering. If you have configured your store to remotely sort and filter data, the onus is on your to provide the correct response based on the passed paging, sorting, and filtering parameters. Since the data is remote, your grid's store must ultimately trust the response to accurately contain the data that it should, and it will not make assumptions otherwise.

    I hope that helps explain the situation a bit better. Please let me know if you have any additional questions.

    Thanks!
    Joel

  3. #2
    Sencha User joel.watson's Avatar
    Join Date
    Nov 2014
    Posts
    3,120
    Answers
    446

    Default

    Hi--

    Sorry for the difficulties you're experiencing.

    The important thing to remember is that when you're doing remote paging with Ext JS grids, the AJAX request which is made for a "page" of data is *only* (and I stress ONLY) a handshake agreement between Ext JS and your server. Fundamentally, Ext JS doesn't "know" how much data you have...it is trusting that the "total" you send back is correct. Ext JS also assumes that you are sending back *only* the data for the requested page.

    So for example, let's use your 100 records as an example, with 10 records per page. Ext JS will expect that the response from the server comes back with at least the following:

    • A "total" field, telling the store how much data is in the remote data source. Again, it will not "validate" that this is correct, hence the "handshake" agreement
    • An array of data that matches the number expected for the requested page. So for example, if you have 100 total records and want the first page, the request for page 1 should return the 10 records of the first page.
    The second point above is crucial...again, your store is going to trust what it receives from the server. If you request page 1 of the 100 records which you've told the store your server has, the store is going to trust that you send back the first 10 records of the data set. If you send back 20 records, 50, or 100 records, it will simply assume that you have given it what it requested, and move along. The same is true for subsequent pages of data. Since your store doesn't inherently know what "page 2" of your data set looks like, it is going to trust that you return the correct 10 records when you request page 2.

    The same is true for sorting and filtering. If you have configured your store to remotely sort and filter data, the onus is on your to provide the correct response based on the passed paging, sorting, and filtering parameters. Since the data is remote, your grid's store must ultimately trust the response to accurately contain the data that it should, and it will not make assumptions otherwise.

    I hope that helps explain the situation a bit better. Please let me know if you have any additional questions.

    Thanks!
    Joel

  4. #3
    Sencha User
    Join Date
    Dec 2015
    Location
    Norther Virginia
    Posts
    15

    Default Thanks!!!

    Thank you so much for the understanding. Now that I understand whats happening, It will be much easier to implement.

  5. #4
    Sencha User joel.watson's Avatar
    Join Date
    Nov 2014
    Posts
    3,120
    Answers
    446

    Default

    Quote Originally Posted by almcaffee View Post
    Thank you so much for the understanding. Now that I understand whats happening, It will be much easier to implement.
    Sure thing, happy to help!

    Thanks
    Joel

  6. #5
    Sencha User
    Join Date
    Dec 2015
    Location
    Norther Virginia
    Posts
    15

    Default

    Please let me know why this is not paging. I have tried every online example in first few pages of a google search. Two things are happening. First my store wont load automatically, I have to manually use a load() function, regardless or not if I have autoload : true.... secondly all the exmplaes are lacking a full explanation of paging. All the comments say you need to use start and limit and this or that but NONE of them have actual samples of that being used NONE OF THEM. Sencha Docs are especially lacking in documentation on using start/limit/extraParams etc. If this is needed for paging, why wouldn't it be in the examples?

    Code:
    Ext4.onReady(function(){
        
        Ext4.define('ciUsage',{
            extend: 'Ext4.data.Model',
            proxy: {
              type: 'ajax',
              reader: {
                  type: 'json'
              }
            },
            fields: [
                {name: 'companyid', mapping: 'companyid', type: 'number'},
                {name: 'resellerid', mapping: 'resellerid', type: 'string'},
                {name: 'companyname', mapping: 'companyname', type: 'string'},
                {name: 'monthly_total', mapping: 'monthly_total', type: 'number'}
            ],
            idproperty: 'companyid'
        });
        
      var usagedata = Ext4.create('Ext4.data.Store', {
            model: 'ciUsage',
            autoload: true,
            pageSize: 25,
            proxy: {
                type: 'ajax',
                timeout: 3600000, 
                url: '/ollie/ciusage-function2.cfc',
                reader: {
                    type: 'json',
                    root: 'data',
                    totalProperty: 'total'
                },
                loadMask: true,
                extraParams: {
                    returnFormat: 'json',
                    method: 'buildsubsdata',
                    companyid: '<cfoutput>#FORM.companyid#</cfoutput>',
                    from_date: '<cfoutput>#FORM.from_date#</cfoutput>',
                    to_date: '<cfoutput>#FORM.to_date#</cfoutput>', 
                },
                limit: 'pageSize'
                
            }
                  });
     
     Ext4.create('Ext4.panel.Panel', {
        renderTo: Ext4.getBody(),
        layout: { type: 'vbox', align: 'stretch'},
        scrollable: true,
        title: '<cfoutput>#l_title#</cfoutput>',
        items: [
            
            Ext4.create('Ext4.grid.Panel', {
            store: usagedata,
            height: 535,
            columns: [
                {
                    text: 'Company ID', 
                    dataIndex: 'companyid', 
                    align: 'left',
                    sortable: true, 
                    menuDisabled: false , 
                    flex: 1 
                  }, 
                  {
                    text: 'Reseller ID', 
                    dataIndex: 'resellerid', 
                    align: 'left',
                    sortable: true, 
                    menuDisabled: false, 
                    flex: 1 
                  }, 
                  {
                    text: 'Company Name', 
                    dataIndex: 'companyname', 
                    align: 'left',    
                    sortable: true, 
                    menuDisabled: false, 
                    flex: 1 
                  }, 
                  {
                    text: 'Email Total', 
                    dataIndex: 'monthly_total', 
                    align: 'right',
                    sortable: true, 
                    menuDisabled: false , 
                    format: "000,000", 
                    xtype: "numbercolumn", 
                    flex: 1 
                  } 
            ],
            dockedItems: [{
            xtype: 'pagingtoolbar',
            store: usagedata,   // same store GridPanel is using
            pageSize: 25, 
            dock: 'bottom',
            displayInfo: true
        }]
            
        })  
        ]
    });
    
    
    usagedata.loadPage(1);
    });

    Dont mind the coldfusion stuff, i assure you, this grid works 100% perfectly besides all that data being on one page.

    EDIT: Do I need to add a handler function in order to pass parameters to the server? I am not sure what extjs is actually doing when the paging button is pressed. it would help to know if it is sending data, etc. What is the ACTION performed when the paging arrow is presseed?

  7. #6
    Sencha User
    Join Date
    Dec 2015
    Location
    Norther Virginia
    Posts
    15

    Default

    NEVERMIND.... got everything I needed from developer console to make this work. thanks anyways.....

  8. #7
    Sencha User
    Join Date
    Jul 2016
    Posts
    19
    Answers
    3

    Default

    Hai,

    Can you post what you have done here for the pagination to work

Similar Threads

  1. Grid Paging:Data not loading
    By Crocuta in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 25 Apr 2011, 1:52 PM
  2. Paging Grid not displaying data?
    By rluk in forum Ext GWT: Discussion
    Replies: 10
    Last Post: 13 Jan 2011, 10:10 AM
  3. Paging Grid getting data from Database
    By blay in forum Ext GWT: Discussion
    Replies: 4
    Last Post: 11 Nov 2010, 4:53 AM
  4. Getting Data in Paging Grid
    By rahulwaghmare in forum Ext 2.x: Help & Discussion
    Replies: 13
    Last Post: 10 Jul 2008, 8:39 PM

Posting Permissions

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