1. #1
    Ext User
    Join Date
    Apr 2007
    Posts
    1
    Vote Rating
    0
    extuser4711 is on a distinguished road

      0  

    Default Grid paging via HTTPProxy does not work with Prototype Adapter

    Grid paging via HTTPProxy does not work with Prototype Adapter


    I tried to build a paged EditorGrid and took the examples for a start.
    However I used the Prototype adapter instead of the YUI one.
    I also used the HttpProxy store to receive data from the server.

    The problem is, that the POST request to the server contains to parameters, which is why paging will never work.

    Just by switching back to the YUI adapter everything now is working fine.
    But still, something seems to be defect here.

  2. #2
    Ext User
    Join Date
    Mar 2007
    Posts
    170
    Vote Rating
    0
    gkassyou is on a distinguished road

      0  

    Default


    I'm having the same issue. Can't get paging to work.

    The paging params to the server when you click the next page button only sends the start and limit and not the rest of the params.

  3. #3
    Ext JS Premium Member
    Join Date
    Apr 2007
    Location
    Eindhoven
    Posts
    115
    Vote Rating
    2
    damien is on a distinguished road

      0  

    Default same problem

    same problem


    I have the same problem. The pagingtoolbar displays the correct data. But the grid loads the complete datastore and not the number defined at the Pagesize parameter. I think that if you take the paging example from Jack and change de proxy into a Httpproxy the paging doesnt work anymore to. But in the comments frmo Jack it says the httpproxy is better in the example if the php file is on the same server.

  4. #4
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    Can you post some code. Thanks.
    Jack Slocum
    Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum
    jack@extjs.com

  5. #5
    Ext JS Premium Member
    Join Date
    Apr 2007
    Location
    Eindhoven
    Posts
    115
    Vote Rating
    2
    damien is on a distinguished road

      0  

    Default my code

    my code


    Hello Jack,
    Here is the code that creates my grid.
    Code:
    var GridUI = function() {
     var ds; //hold our data
     var grid; //component
     var columnModel; // definition of the columns
     
     
     function setupDataSource() {
      ds = new Ext.data.Store({
       proxy:  new Ext.data.HttpProxy({url:/get_dealers.php'}),
       reader:  new Ext.data.JsonReader(
        {root: 'records',totalProperty: '281', id: 'sleutel'},
        [
         {name: 'sleutel'},
         {name: 'dealernr'},
         {name: 'DA'},
         {name: 'rayon'},
         {name: 'b_naam'},
         {name: 'b_adres'},
         {name: 'b_postcode'}
        ]
       )
      }
      ); 
     }
     
     function getColumnModel() {
      if(!columnModel) {
       columnModel = new Ext.grid.ColumnModel(
        [{
         header: "Dealer nr",
         dataIndex: 'dealernr',
         sortable: true,
         width: 40
        },{
         header: "DA",
         sortable: true,
         dataIndex: 'DA',
         width: 20
        },{
         header: "Rayon",
         sortable: true,
         dataIndex: 'rayon',
         width: 20
        },{
         header: "Naam bedrijf",
         sortable: true,
         dataIndex: 'b_naam',
         width: 150
        },{
         header: "Adres bedrijf",
         sortable: true,
         dataIndex: 'b_adres',
         width: 150
        },{
         header: "Postcode bedrijf",
         sortable: true,
         dataIndex: 'b_postcode',
         width: 150
        }]
       );
      }
      return columnModel;
     }
     
     function buildGrid() {
      var grid = new Ext.grid.Grid(
       'topic-grid',
       {
        ds: ds,
        cm: getColumnModel(),
        autoSizeColumns: false,
        loadMask: true
       }
      );
     
      innerLayout.add('center', new Ext.GridPanel(grid, {title: 'Dealers',autoScroll:false}));
     
      grid.on("rowdblclick", function(grid) {
       alert(grid.getSelectionModel().getSelected().data.b_naam);
      });
     
        grid.render();
     
        var gridFoot = grid.getView().getFooterPanel(true);
        var paging = new Ext.PagingToolbar(gridFoot, ds, {
            pageSize: 25,
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display"
        });
     
        ds.load({params:{start:0,limit:25}});
     }
     
     return {
      init : function() {
       setupDataSource();
       buildGrid();
      }
     }
    }();
    Ext.onReady(GridUI.init, GridUI, true);
    Here is a part of the result from my php file. It gives json output:
    {"records":[{"sleutel":"1","dealernr":"107800","DA":"D","rayon":"1","b_naam":"NEFKENS UTRECHT BV","b_adres":"ATOOMWEG 79","b_postcode":"3542AA"},{"sleutel":"2","dealernr":"107801","DA":"SV","rayon":"0","b_naam":"NEFKENS UTRECHT BV","b_adres":"ST. LAURENSDREEF 26","b_postcode":"3565AK"},{"sleutel":"3","dealernr":"107803","DA":"SV","rayon":"0","b_naam":"NEFKENS NIEUWEGEIN BV","b_adres":"AMBACHTSWEG 6","b_postcode":"3433PR"}]}

    The result off this is a nice grid (i like ext).
    My problem:
    The grid displays all the 281 records from the datastore. The pagingtoolbar displays the correct data. It says page 1 of 12 ect. In the attachment screenshot from pagingtoolbar. I am new to ext, i hope i didnt make a mistake in my part off the code. Thank you for looking at my problem.
    Attached Images

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    62
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Here's part of your prob:

    Code:
        {root: 'records',totalProperty: '281', id: 'sleutel'},
    What, you know there will always be 281 records?!

    http://www.extjs.com/deploy/ext/docs...-totalProperty

    The reason why it gets the paging toolbar right is that your PHP script is ignoring the start and limit parameters and sending all 281 records out in one go.

    In the absence of a valid totalProperty indicator, the Store uses the number of Records returned as its size. That is 281. But it also knows that you set the limit at 25, and so thinks there are more pages.

  7. #7
    Ext JS Premium Member
    Join Date
    Apr 2007
    Location
    Eindhoven
    Posts
    115
    Vote Rating
    2
    damien is on a distinguished road

      0  

    Default Problem solved

    Problem solved


    Thank you for your reply. I solved the problem. I was thinking that the 'start' and 'limit' param from the datastore.load always had the same value start:0 and limit:25. I didnt understand that the ext was changing the values when i clicked on the next page button in the pagingtoolbar. Thank you for your time.