Next button disabled in pagination toolbar of ExtJS

Question

I am rendering a grid with pagingtoolbar. The api works fine returned desired number of records as per the start and limit params. But the next page button of the paging toolbar is disabled. I went through some documentations, and figured out they need rootProperty and totalProperty parameters. But the data I am returning has no such property. How to solve this issue.

This is the data as response from 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"
    }
  ]

The code goes like -

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(),
    })
})

Peter Koltai · Answer 1 · 2022-02-20T09:39:52.190

You don't have to set rootProperty if your results come directly in the response body.
Although you don't have to, but I suggest that you set the same store for the paging toolbar as your grid, like:

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

But the paging will not work without information from the backend about the total number of records. The toolbar will try to display that for example you are on the 3rd page out of the possible 100, and for this you need the number of total records. The value of totalProperty defaults to total, which is not present in your response, that's why the paging controls are disabled.

score 0 · Answer 2 · answered Feb 20 '22 at 17:36

0

As mentioned by Peter you have to send the total key:

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

with the above example the rootProperty would be data in your store-proxy-reader

answered Feb 20 '22 at 17:36

Dinkheller

4,631
5
39
67

Next button disabled in pagination toolbar of ExtJS

2 Answers2