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

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

以下是我预期的回应：

{
  "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 store，但我不知道如何传递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', type: 'int' },
        { name: 'to', type: 'int' }, 
        { name: 'pageSize', type: 'int' },
        { name: 'totalCount', type: 'int' },
        { name: 'totalPages', type: 'int' },
        ],
    hasMany: 'Rental',
});

---

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

Ext的rest代理设计为使用标准rest API，其中分页和筛选选项作为查询参数传入。例如

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

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

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

更新

您可以从以下代码开始（也创建了）：

Ext.define（'Yournamespace.proxy.custom'{
扩展：“Ext.data.proxy.Rest”，
别名：“proxy.custom”，
buildUrl:函数（请求）{
const url=this.callParent（[request]）；
const operation=request.getOperation（）；
console.log（url，this.getParams（操作））
返回url；
}
});
Ext.define（'用户'{
扩展：“Ext.data.Model”，
});
外部应用程序({
名字：“小提琴”，
启动：函数（）{
var myStore=Ext.create（'Ext.data.Store'{
模型：“用户”，
页面大小：10，
代理：{
键入：“自定义”，
网址：'https://localhost:44313/api/Rentals/',
读者：{
键入：“json”，
rootProperty:'用户'
}
},
自动加载：正确
});
}
});

---

您可以将自定义代码写入

buildUrl

函数。目前只有默认的URL和参数被收集并记录在那里，但它做的是默认的东西。您可以在此处调整URL并在末尾返回新的URL。

查看beforeLoad方法并相应地更改URL。我应该将beforeLoad方法放在哪里？有没有可能实时更新参数？下一页、上一页或更改页面大小？可以使用buildUrl方法。您的模型有点奇怪，它必须包含id、customer、DateRendered和returnDate字段。。并且你的商店必须有rootProperty:“items”。。你检查过你的代码了吗？你可以在商店->监听器->加载前添加一个监听器。在回调函数中，您可以执行以下操作（store是该fn的第一个参数）->store.getProxy（）.getExtraParams（）->modify->set and load。但是正如Arthur和Zoltan所提到的，我建议改进后端响应结构（模型）（如果可能的话）以及使用查询而不是pathparameters。这会让你的生活更轻松。事实上，我正在尝试学习多种场景下的ExtJS。是的，更改API可以解决我的问题，但如果遇到无法控制API的情况，该怎么办。这些都是我正在准备做的事情。您能告诉我如何使用自定义代理进行覆盖，以及如何在更改页面时从视图控制器调用它吗。我仍然是ExtJS的初学者，所以一个代码片段将非常有帮助。谢谢。我想这意味着无法更改API以使用正确的REST参数：）。我会在时间允许的情况下尽快更新我的答案。为您添加了一个覆盖buildUrl函数的示例。享受。：）我完全同意使用标准RESTAPI。你能告诉我如何用这个URL改变网页吗：从网格？我不确定我是否理解你的问题。请提供更多详情。