Whole data displayed per page in grid

[elwholer]

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:

gridpagingpic.png

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

This is my javascript 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

[scottmartin]

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.

[elwholer]

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

[{"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?

[scottmartin]

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

Scott.

[joaquingt]

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

[elwholer]

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