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

    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

    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
    New York, NY
    Posts
    6,956
    Vote Rating
    18
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default

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

  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

    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,565
    Vote Rating
    55
    Animal will become famous soon enough Animal will become famous soon enough

      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

    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.