如何在我的 Ext Store 上创建参数化的 Ext Rest 代理

问题描述

我有一个 API 可以发送数据的分页结果，我希望它被我的 Ext JS 应用程序使用，但我不知道如何提供所需的参数。

这是我期望的回复：

{
  "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
}

这里是端点：

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

这是我的 Ext 存储，但我不知道如何传递 currentPage 和 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
        }
    },});

这是模型：

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

我希望有人能帮助我解决我的问题。谢谢。

解决方法

Ext 的 rest 代理旨在使用标准 REST API，其中分页和过滤选项作为查询参数传入。 IE。类似的东西

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

我建议使用这种方法而不是非标准的 REST API。它将使您能够无缝地使用 Ext 的相关功能。

如果无法更改 API 并且您需要坚持当前的服务器配置，那么您需要创建一个自定义代理来覆盖一些相关功能。最好的办法是覆盖 buildUrl 函数并将自定义生成的 URL 传递给请求对象。

更新

您可以从这个代码开始（也创建了一个 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
     });
    }
});

您可以将自定义代码写入 buildUrl 函数。目前只有默认的 URL 和参数会被收集并记录在那里，但它会做默认的事情。您可以在此处调整 URL，并在末尾返回新 URL。