ExtJS的分页工具栏中禁用了“下一步”按钮

zvokhttg  于 2022-09-26  发布在  其他
关注(0)|答案(2)|浏览(210)

我正在用pagingtoolbar渲染网格。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(),
    })
})
j5fpnvbx

j5fpnvbx1#

1.如果结果直接出现在响应正文中,则不必设置rootProperty
1.虽然您不必这样做,但我建议您为页面工具栏设置与网格相同的存储,例如:

bbar: {
  xtype: 'pagingtoolbar',
  displayInfo: true,
  store: storeForGrid
},

1.但如果没有后端关于记录总数的信息,分页将无法工作。工具栏将尝试显示,例如,在可能的100条记录中,您位于第3页,为此,您需要总记录数。totalProperty的值默认为total,这在您的响应中不存在,这就是禁用分页控件的原因。

eivgtgni

eivgtgni2#

如Peter所述,您必须发送总密钥:

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

在上面的示例中,rootProperty在存储代理读取器中应该是data

相关问题