How to create parameterized Ext Rest Proxy on my Ext Store

Question

I have a API that sends out a paginated result of data and I want it to be consumed my Ext JS app but I don't know how to supply the needed parameters.

Here is the response I expect:

{
  "currentPage": 1,
  "from": 1,
  "items": [
    {
      "id": 1,
      "customer": "Customer 1",
      "movie": "Movie 1",
      "dateRented": "2021-01-25T01:22:42.143",
      "dateReturned": "2021-01-25T01:22:50.447"
    },
    {
      "id": 2,
      "customer": "Customer 2",
      "movie": "Movie 2",
      "dateRented": "2021-01-25T01:22:42.15",
      "dateReturned": "2021-01-25T01:22:54.573"
    }
  ],
  "pageSize": 2,
  "to": 2,
  "totalCount": 1000003,
  "totalPages": 500002,
  "hasPreviousPage": false,
  "hasNextPage": true
}

Here is the endpoint:

/api/Rentals/{currentPage}/{pageSize}

Here is my Ext store but I don't know how I will be able to pass the value for currentPage and pageSize:

Ext.define('Vidly.store.PagedRentals', {
    extend: 'Ext.data.Store',
    alias: 'store.pagedrentals',
    storeId: 'pagedrentals',
    model: 'Vidly.model.PagedRental',
    autoLoad: true,
    autoSync: true,
    proxy: {
        type: 'rest',
        url: 'https://localhost:44313/api/Rentals/',
        useDefaultXhrHeader: false,
        reader: {
            type: 'json',
            headers: { 'Accept': 'application/json' },
        },
        writer: {
            type: 'json',
            writeAllFields: true
        }
    },
});

And here is the model:

Ext.define('Vidly.model.PagedRental', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'currentPage', type: 'int' },
        { name: 'from', type: 'int' },
        { name: 'to', type: 'int' }, 
        { name: 'pageSize', type: 'int' },
        { name: 'totalCount', type: 'int' },
        { name: 'totalPages', type: 'int' },
        ],
    hasMany: 'Rental',
});

I hope someone can help me with my problem. Thank you.

Take a look at the beforeLoad method and change the url accordingly. — hwsw
– hwsw, Commented Feb 4, 2021 at 12:17
Where do I put the beforeload method? And it is it possible to update the parameters on the fly? Ex: next page, previous page or changing pageSize? — Samuel Marvin Aguilos
– Samuel Marvin Aguilos, Commented Feb 4, 2021 at 14:18
It is possible to do with buildUrl method. Your model is a little bit strange, it must contain the id, customer, dateRented, returnDate fields.. and your store must have rootProperty: 'items'.. Have you checked your code? — Arthur Rubens
– Arthur Rubens, Commented Feb 4, 2021 at 14:52
You could add a listener on the store -> listeners -> beforeload. Inside the the callback you can do something like (store is the first param of that fn) -> store.getProxy().getExtraParams() -> modify -> set and load. But as Arthur and Zoltan mentioned, i would suggest to improve the backend response structure (model) (if possible) as well as use query instead of pathparameters. This will make your life much easier. — hwsw
– hwsw, Commented Feb 4, 2021 at 17:10
Actually I am trying to learn ExtJS for multiple scenarios. Yes changing the API would fix my problem but what if I encountered a scenario that I don't have control over the API. These are the things that I am preparing to. — Samuel Marvin Aguilos
– Samuel Marvin Aguilos, Commented Feb 5, 2021 at 3:18

Zoltan Magyar · Accepted Answer · 2021-02-05 10:23:16Z

1

Ext's rest proxy is designed to use standard REST APIs where paging and filtering options are passed in as query parameters. I.e. something like

https://localhost:44313/api/Rentals?start=1&limit=25

I would recommend to use this approach rather than a non standard REST API. It will enable you to use Ext's related features seamlessly.

If there is no way to change the API and you need to stick with your current server configuration then you need to create a custom proxy overriding some of the related functions. The best bet if you override the buildUrl function and pass your custom generated URL to the request object.

UPDATE

You can start with this code (also created a Fiddle):

Ext.define('Yournamespace.proxy.custom', {
        extend: 'Ext.data.proxy.Rest',
        alias: 'proxy.custom',
        buildUrl: function(request) {
            const url = this.callParent([request]);
            const operation = request.getOperation();
            console.log(url, this.getParams(operation))
            return url;
        }
    });
    
 Ext.define('User', {
     extend: 'Ext.data.Model',
 });

 
Ext.application({
    name : 'Fiddle',
    launch : function() {
    var myStore = Ext.create('Ext.data.Store', {
         model: 'User',
         pageSize: 10,
         proxy: {
             type: 'custom',
             url: 'https://localhost:44313/api/Rentals/',
             reader: {
                 type: 'json',
                 rootProperty: 'users'
             }
         },
         autoLoad: true
     });
    }
});

You can write your custom code to the buildUrl function. Currently only the default URL and the params are collected and logged there but it does the default stuff. You can tweak the URL here and return the new URL at the end.

edited Feb 5, 2021 at 10:23

answered Feb 4, 2021 at 17:01

Zoltan Magyar

8731 gold badge6 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Samuel Marvin Aguilos Over a year ago

Can you show or teach me how I could do a custom proxy for overriding and how I can call it from the view controller when changing pages. I am still a beginner on ExtJS so a snippet would greatly help. Thank you.

Zoltan Magyar Over a year ago

I assume it means there is no way to change the API to use proper REST parameters :). I will update my answer as soon as time permits.

Zoltan Magyar Over a year ago

Added an example for you to overwrite the buildUrl function. Enjoy. :)

Samuel Marvin Aguilos Over a year ago

I completely agree with using standard REST API. Can you tell me how to change the page with this URL: localhost:44313/api/Rentals?start=1&limit=25 from a grid?

Zoltan Magyar Over a year ago

I'm not sure I understand your question. Please provide more details.

|

Collectives™ on Stack Overflow

How to create parameterized Ext Rest Proxy on my Ext Store

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related