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

Question

我有一个 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', type: 'int' },
        { name: 'to', type: 'int' }, 
        { name: 'pageSize', type: 'int' },
        { name: 'totalCount', type: 'int' },
        { name: 'totalPages', type: 'int' },
        ],
    hasMany: 'Rental',
});

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

Answer 1

Ext 的 rest 代理旨在使用标准 REST APIs，其中分页和过滤选项作为查询参数传入。 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 并在最后调整 return 新的 URL。

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

How to create parameterized Ext Rest Proxy on my Ext Store

javascript

rest

extjs

single-page-application

sencha-architect