extjs6 写一个分页的完整实例

以下是一个基于ExtJS 6的分页实例，包含后端数据源和前端分页组件：

1. 数据源：

假设我们有一个返回JSON格式数据的URL：http://localhost/getData.php，它返回的数据格式如下：

{
    "success": true,
    "totalCount": 50,
    "data": [
        {
            "id": 1,
            "name": "John",
            "age": 30
        },
        {
            "id": 2,
            "name": "Mary",
            "age": 25
        },
        ...
    ]
}

其中，totalCount表示总数据条数，data是具体的数据项。

2. 前端分页组件：

Ext.define('MyApp.view.MyGridPanel', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.mygridpanel',
    store: 'MyStore',
    columns: [
        { text: 'ID', dataIndex: 'id' },
        { text: 'Name', dataIndex: 'name' },
        { text: 'Age', dataIndex: 'age' }
    ],
    dockedItems: [{
        xtype: 'pagingtoolbar',
        store: 'MyStore',
        dock: 'bottom',
        displayInfo: true
    }]
});

其中，store是数据源，columns是表格列定义，pagingtoolbar是分页工具栏。

3. 后端数据源：

getData.php代码如下：

<?php

$start = isset($_REQUEST['start']) ? $_REQUEST['start'] : 0;
$limit = isset($_REQUEST['limit']) ? $_REQUEST['limit'] : 20;

$data = array();
for ($i = $start; $i < $start + $limit; $i++) {
    $data[] = array(
        'id' => $i,
        'name' => 'Name ' . $i,
        'age' => rand(20, 50)
    );
}

$result = array(
    'success' => true,
    'totalCount' => 100,
    'data' => $data
);

header('Content-Type: application/json');
echo json_encode($result);

其中，start和limit是前端传递的参数，用于指定返回的数据条数和起始位置。

4. 前端数据源：

Ext.define('MyApp.store.MyStore', {
    extend: 'Ext.data.Store',
    alias: 'store.mystore',
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: 'getData.php',
        reader: {
            type: 'json',
            rootProperty: 'data',
            totalProperty: 'totalCount'
        }
    }
});

其中，proxy是数据代理，用于加载后端数据，并将其转换为ExtJS数据模型。reader用于解析返回的JSON数据。

以上就是一个完整的ExtJS 6分页实例。当我们使用MyGridPanel时，它会自动加载数据并显示分页工具栏，当我们点击分页工具栏时，会向后端请求对应的数据，并更新表格内容。