Ext React Grid Pagination

Question

Я хочу создать нумерацию сетки для ExtReact

Пример изображения

Answer 1

Вам необходимо прикрепить pagingtoolbar. Пример:

import React, { Component } from 'react'
import { Grid, Column } from '@extjs/ext-react';

Ext.require('Ext.grid.plugin.PagingToolbar');

export default class MyExample extends Component {

    store = new Ext.data.Store({
        pageSize: 3,
        data: [
            { 'fname': 'Barry',  'lname': 'Allen', 'talent': 'Speedster'},
            { 'fname': 'Oliver', 'lname': 'Queen', 'talent': 'Archery'},
            { 'fname': 'Kara',   'lname': 'Zor-El', 'talent': 'All'},
            { 'fname': 'Helena', 'lname': 'Bertinelli', 'talent': 'Weapons Expert'},
            { 'fname': 'Hal',    'lname': 'Jordan', 'talent': 'Willpower'  }
        ]
    });

    render() {
        return (
            <Grid
                height="180"
                store={this.store}
                plugins={['pagingtoolbar']}
            >
                <Column
                    text="First Name"
                    dataIndex="fname"
                    flex={1}
                />
                <Column
                    text="Last Name"
                    dataIndex="lname"
                    flex={1}
                />
                <Column
                    text="Talent"
                    dataIndex="talent"
                    flex={1}
                />
            </Grid>
        )
    }
}