extjs6做一个简单的分页

ExtJS 6提供了一个方便的分页组件，可以轻松实现分页功能。以下是一个简单的分页示例：

1. 创建一个store，用于获取数据并进行分页：

Ext.define('MyApp.store.MyStore', {
    extend: 'Ext.data.Store',
    alias: 'store.mystore',
    fields: ['id', 'name', 'email'],
    pageSize: 5, // 每页显示5条数据
    autoLoad: true, // 自动加载数据
    proxy: {
        type: 'ajax',
        url: 'data/mydata.json',
        reader: {
            type: 'json',
            rootProperty: 'data',
            totalProperty: 'total'
        }
    }
});

2. 创建一个grid，用于显示数据：

Ext.define('MyApp.view.MyGrid', {
    extend: 'Ext.grid.Panel',
    xtype: 'mygrid',

    store: {
        type: 'mystore'
    },

    columns: [
        { text: 'ID', dataIndex: 'id' },
        { text: 'Name', dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email' }
    ],

    bbar: {
        xtype: 'pagingtoolbar',
        displayInfo: true,
        store: {
            type: 'mystore'
        }
    }
});

3. 在页面上渲染grid：

Ext.create('MyApp.view.MyGrid', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 300
});

这样就完成了一个简单的分页功能。当用户浏览数据时，分页工具栏会自动更新页码和总页数，并且自动请求数据。