0

我正在使用分页工具栏渲染网格。该 api 工作正常，根据 start 和 limit 参数返回所需的记录数。但是分页工具栏的下一页按钮被禁用。我浏览了一些文档，发现它们需要 rootProperty 和 totalProperty 参数。但是我返回的数据没有这样的属性。如何解决这个问题。

这是来自 api 的响应数据 -

[
    {
      "filmId": 1,
      "title": "ACADEMY DINOSAUR",
      "description": "A Epic Drama of a Feminist And a Mad Scientist who must Battle a Teacher in The Canadian Rockies",
      "releaseYear": "2005",
      "rating": "PG-13",
      "specialFeatures": "Deleted Scenes,Behind the Scenes",
      "language": "German"
    },
    {
      "filmId": 2,
      "title": "ACE GOLDFINGER",
      "description": "A Astounding Epistle of a Database Administrator And a Explorer who must Find a Car in Ancient China",
      "releaseYear": "2003",
      "rating": "G",
      "specialFeatures": "Trailers,Deleted Scenes",
      "language": "English"
    },
    {
      "filmId": 3,
      "title": "ADAPTATION HOLES",
      "description": "A Astounding Reflection of a Lumberjack And a Car who must Sink a Lumberjack in A Baloon Factory",
      "releaseYear": "2006",
      "rating": "NC-17",
      "specialFeatures": "Trailers,Deleted Scenes",
      "language": "English"
    },
    {
      "filmId": 4,
      "title": "AFFAIR PREJUDICE",
      "description": "A Fanciful Documentary of a Frisbee And a Lumberjack who must Chase a Monkey in A Shark Tank",
      "releaseYear": "2006",
      "rating": "G",
      "specialFeatures": "Commentaries,Behind the Scenes",
      "language": "English"
    },
    {
      "filmId": 5,
      "title": "AFRICAN EGG",
      "description": "A Fast-Paced Documentary of a Pastry Chef And a Dentist who must Pursue a Forensic Psychologist in The Gulf of Mexico",
      "releaseYear": "2006",
      "rating": "G",
      "specialFeatures": "Deleted Scenes",
      "language": "English"
    },
    {
      "filmId": 6,
      "title": "AGENT TRUMAN",
      "description": "A Intrepid Panorama of a Robot And a Boy who must Escape a Sumo Wrestler in Ancient China",
      "releaseYear": "2006",
      "rating": "PG",
      "specialFeatures": "Deleted Scenes",
      "language": "English"
    },
    {
      "filmId": 7,
      "title": "AIRPLANE SIERRA",
      "description": "A Touching Saga of a Hunter And a Butler who must Discover a Butler in A Jet Boat",
      "releaseYear": "2006",
      "rating": "PG-13",
      "specialFeatures": "Trailers,Deleted Scenes",
      "language": "English"
    },
    {
      "filmId": 8,
      "title": "AIRPORT POLLOCK",
      "description": "A Epic Tale of a Moose And a Girl who must Confront a Monkey in Ancient India",
      "releaseYear": "2006",
      "rating": "R",
      "specialFeatures": "Trailers",
      "language": "English"
    },
    {
      "filmId": 9,
      "title": "ALABAMA DEVIL",
      "description": "A Thoughtful Panorama of a Database Administrator And a Mad Scientist who must Outgun a Mad Scientist in A Jet Boat",
      "releaseYear": "2006",
      "rating": "PG-13",
      "specialFeatures": "Trailers,Deleted Scenes",
      "language": "English"
    },
    {
      "filmId": 10,
      "title": "ALADDIN CALENDAR",
      "description": "A Action-Packed Tale of a Man And a Lumberjack who must Reach a Feminist in Ancient China",
      "releaseYear": "2006",
      "rating": "NC-17",
      "specialFeatures": "Trailers,Deleted Scenes",
      "language": "English"
    }
  ]

代码就像 -

var itemsPerPage = 10;

Ext.onReady(function () {

    model = Ext.define('User', {
        extend: 'Ext.data.Model',
        fields: [
            { name: 'title', mapping: 'title', type: 'string' },
            { name: 'decription', mapping: 'description', type: 'string' },
            { name: 'releaseYear', mapping: 'releaseYear', type: 'string' },
            { name: 'rating', mapping: 'rating', type: 'string' },
            { name: 'specialFeatures', mapping: 'specialFeatures', type: 'string' },
        ],
        pageSize: itemsPerPage,
        validators: {
            username: 'presence'
        },
    });

    var storeForGrid = Ext.create('Ext.data.Store', {
        model: 'model',
        pageSize: itemsPerPage,
        proxy: {
            type: 'ajax',
            url: 'http://localhost:8080/CHECKING/displayAll',
            render: {
                type: 'json',
            },
            autoLoad: true,
        }
    });
    
    storeForGrid.load({
        params: {
            start: 0,
            limit: itemsPerPage,
            foo:   'bar'
        }
    });
    

    let gridPanel = Ext.create('Ext.grid.Panel', {
        title: 'Movie Grid',
        store: storeForGrid,
        selModel: {
            checkOnly: false,
            injectCheckbox: 'first',
            mode: 'SIMPLE'
        },
        selType: 'checkboxmodel',
        columns: [
            {
                text: 'Title',
                dataIndex: 'title',
                flex: 1
            },
            {
                text: 'Description',
                dataIndex: 'description',
                flex: 1
            },
            {
                text: 'Release Year',
                dataIndex: 'releaseYear',
                flex: 1
            },
            {
                text: 'Language',
                dataIndex: 'language',
                flex: 1
            },
            {
                text: 'Rating',
                dataIndex: 'rating',
                flex: 1
            },
            {
                text: 'Special Feature',
                dataIndex: 'specialFeatures',
                flex: 1
            }
        ],
        bbar: {
            xtype: 'pagingtoolbar',
            displayInfo: true
        },
        width: '100%'
    });

    var mainBody = Ext.create('Ext.container.Viewport', {
        margin: 0,
        items: [gridPanel],
        renderTo: Ext.getBody(),
    })
})
4

2 回答 2

0
  1. rootProperty如果您的结果直接出现在响应正文中，则不必设置。
  2. 虽然您不必这样做，但我建议您为分页工具栏设置与网格相同的存储，例如：
bbar: {
  xtype: 'pagingtoolbar',
  displayInfo: true,
  store: storeForGrid
},
  1. 但是如果没有来自后端的有关记录总数的信息，分页将无法工作。工具栏将尝试显示，例如，您在可能的 100 页中的第 3 页，为此您需要总记录数。totalProperty默认值为total，您的响应中不存在该值，这就是禁用分页控件的原因。
于 2022-02-20T09:33:32.773 回答
0

正如彼得所说，您必须发送总密钥：

{
    data: [
      {
        "filmId": 1,
        "title": "ACADEMY DINOSAUR",
      },
    total: 1
}

对于上面的示例，rootProperty 将data在您的 store-proxy-reader 中

于 2022-02-20T17:36:49.717 回答