Github 外部网格分页

我想在ExtReact

---

示例图像

您需要附加

分页工具栏

。 例如：

import React，{Component}来自“React”
从“@extjs/extreact”导入{Grid，Column}”；
Ext.require（'Ext.grid.plugin.PagingToolbar'）；
导出默认类MyExample扩展组件{
store=新的Ext.data.store({
页面大小：3，
数据：[
{'fname'：'Barry'，'lname'：'Allen'，'talent'：'Speedster'}，
{'fname'：'Oliver'，'lname'：'Queen'，'talent'：'Archery'}，
{'fname'：'Kara'，'lname'：'Zor El'，'talent'：'All'}，
{'fname'：'Helena'，'lname'：'Bertinelli'，'talent'：'武器专家'}，
{'fname'：'Hal'，'lname'：'Jordan'，'talent'：'Willpower'}
]
});
render（）{
返回(
)
}
}

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

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