Ext React 网格分页答案

【问题标题】：Ext React Grid PaginationExt React 网格分页
【发布时间】：2020-01-16 19:20:57
【问题描述】：

我想在 ExtReact

上创建网格分页

示例图片

【问题讨论】：

我认为要求为您完成整个任务是不合适的。请告诉我们您的尝试并提出您的问题。

标签： github extjs

【解决方案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>
        )
    }
}

【讨论】：