1. #1
    Sencha User elwholer's Avatar
    Join Date
    Jul 2012
    Location
    Perú
    Posts
    6
    Vote Rating
    0
    elwholer is on a distinguished road

      0  

    Default Answered: Whole data displayed per page in grid

    Answered: Whole data displayed per page in grid


    Hi there guys, I have a problem about the paging feature that grid has. The paging control's data is good, defined by the configuration, prompts the number of pages and the counting of all the records. The problem is about the data in the grid, the grid displays the whole data per page instead of the quantity of rows that I defined per page.

    Here is a pic:

    As you can see, I defined 5 rows per page, but the grid exposes the whole data per page.

    This is my javascript code:

    Code:
    Ext.require([
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.util.*',
        'Ext.toolbar.Paging',
        'Ext.ModelManager',
        'Ext.tip.QuickTipManager'    
        ]);
    
    
    Ext.onReady(function(){
        var itemsPerPage = 5;
      
        var store = new Ext.data.JsonStore({
            fields: [
            'item_tipo', 'desc30'
            ],
            autoLoad: {
                start: 0, 
                limit: itemsPerPage
            },
            proxy : new Ext.data.HttpProxy({
                method: 'GET',
                url: 'AjaxTipoItem.php'
            }),
            pageSize : itemsPerPage
              
        });
    
    
        Ext.create('Ext.grid.Panel', {
            multiSelect: true,
            store: store,
            collapsible: true,
            columns: [
            {
                text: "Tipo", 
                flex: 1, 
                dataIndex: 'item_tipo', 
                sortable: true
            },
            {
                text: "Descripción", 
                
                dataIndex: 'desc30', 
                sortable: true
            }
            ],
            bbar: Ext.create('Ext.PagingToolbar', {
                pageSize: 5,
                store: store,
                displayInfo: true
               
            }),
            renderTo:'example-grid',
            width: 540,
            height: 200,
            title:'Tipos de Item',
            
            viewConfig: {
                enableTextSelection: true
            }
         
        });
    });
    I don't know what I am doing wrong. Please I need some help. Thanks a lot in advance

  2. Is your server only sending the correct section back? Seems like you have the paging setup on the client, but the server is not adhering to start/limit.

    Scott.

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,110
    Answers
    678
    Vote Rating
    470
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      1  

    Default


    Is your server only sending the correct section back? Seems like you have the paging setup on the client, but the server is not adhering to start/limit.

    Scott.

  4. #3
    Sencha User elwholer's Avatar
    Join Date
    Jul 2012
    Location
    Perú
    Posts
    6
    Vote Rating
    0
    elwholer is on a distinguished road

      0  

    Default


    Do I have to check something on server side? This is the server response in json format:

    PHP Code:
    [{"item_tipo":"37","desc30":"Monedas22"},{"item_tipo":"45","desc30":"Monedas22"},{"item_tipo":"47","desc30":"Monedas22"},{"item_tipo":"60","desc30":"Monedas22"},{"item_tipo":"65","desc30":"Monedas22"},{"item_tipo":"71","desc30":"Monedas22"},{"item_tipo":"72","desc30":"Monedas22"},{"item_tipo":"aa","desc30":"Monedas22"},{"item_tipo":"ab","desc30":"Monedas22"},{"item_tipo":"AM","desc30":"Ambientes"},{"item_tipo":"CA","desc30":"Jaja"},{"item_tipo":"df","desc30":"Monedas22"},{"item_tipo":"EQ","desc30":"Equipos"},{"item_tipo":"g0","desc30":"Jaja2"},{"item_tipo":"g1","desc30":"Jaja2"},{"item_tipo":"g2","desc30":"Jaja2"},{"item_tipo":"g5","desc30":"Jaja2"},{"item_tipo":"HA","desc30":"Jaja"},{"item_tipo":"II","desc30":"asdff"},{"item_tipo":"IN","desc30":" Inventarios"},{"item_tipo":"kk","desc30":"rodrigo"},{"item_tipo":"LL","desc30":"holaloco1"},{"item_tipo":"M1","desc30":"Monedas2"},{"item_tipo":"M2","desc30":"Monedas22"},{"item_tipo":"M3","desc30":"Monedas22"},{"item_tipo":"M4","desc30":"Monedas22"},{"item_tipo":"M8","desc30":"Monedas22"},{"item_tipo":"MM","desc30":"Jaja"},{"item_tipo":"MO","desc30":"Monedas"},{"item_tipo":"MU","desc30":"Muebles"},{"item_tipo":"O1","desc30":"holaloco1"},{"item_tipo":"O7","desc30":"holaloco1"},{"item_tipo":"O8","desc30":"holaloco1"},{"item_tipo":"O9","desc30":"holaloco1"},{"item_tipo":"OB","desc30":"Objetos"},{"item_tipo":"OO","desc30":"holaloco"},{"item_tipo":"P2","desc30":"Jaja2"},{"item_tipo":"P3","desc30":"Jaja2"},{"item_tipo":"P4","desc30":"Jaja2"},{"item_tipo":"P5","desc30":"Jaja2"},{"item_tipo":"P8","desc30":"Jaja2"},{"item_tipo":"P9","desc30":"Jaja2"},{"item_tipo":"PA","desc30":"Jaja2"},{"item_tipo":"PN","desc30":"Jaja"},{"item_tipo":"z9","desc30":"rodrigo"},{"item_tipo":"zA","desc30":"Jaja"}] 
    As a newbie , I worked assuming that ExtJs would divide in pages the server response by the configuration I set up, and actually is the whole data that JsonStore receives.

    Do I have to create a Sql select that can receive a param sent by ExtJs? I think that I have the SQL sentence to divide the whole data in sections, but not the client configuration to send a param to the server side. How can I do that?

  5. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,110
    Answers
    678
    Vote Rating
    470
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      1  

    Default


    Here are few examples to get you going:
    http://www.sencha.com/forum/showthread.php?229457

    Scott.

  6. #5
    Sencha User
    Join Date
    Jun 2012
    Posts
    9
    Vote Rating
    1
    joaquingt is on a distinguished road

      1  

    Default


    consulta.asp?_dc=1343947326343&codigo=3&page=1&start=0&limit=25&sort=ROWID&dir=ASC
    the ones you'll need are page, start, limit

  7. #6
    Sencha User elwholer's Avatar
    Join Date
    Jul 2012
    Location
    Perú
    Posts
    6
    Vote Rating
    0
    elwholer is on a distinguished road

      0  

    Default


    Finally I solved it . Was a little hard at the beginning but, with your suggestions, things went smooth

    Server must be prepared to receive "start" and "limit" as params that will complete the SQL SELECT sentence with the LIMIT option, the one that is going to separate the records.

    The server response in Json format must be composed by the total rows of all the table, and the rows. Both tagged so the reader in the client side will be capable to consume both.

    There are things that I don't understand well. If I just send the start param as 0 and limit param as 5, both who are going to complete the SQL sentence "SELECT col1, col2 FROM table1 LIMIT 0,5" and resulting in the first page. How the grid brings me back the next pages as well as the first one? I checked the values sent to the server, and when I click the next page, start param changes to 5, 10, 15 and so on. I suppose that is because of some logic in client side based on multiples of start param.

    What really amazed me to accomplish this are the facts that I didn't have to control the next or last page events, I didn't send to the server a page number, and start param changes as well as the definition of rows per page in client side while clicking the next or prev buttons.

    I'm so glad for your help. Thanks a lot

Thread Participants: 2

Tags for this Thread