JSFiddle - React, Tailwind, and code Playground

by Johan Vandeplas

HTML

<link rel="stylesheet" href="http://localhost:8181/ceres/ext/resources/css/ext-all-debug.css">
<script src="http://localhost:8181/ceres/ext/ext-all-dev.js"></script>

JavaScript

var itemsPerPage = 2; // set the number of items you want per page

var store = Ext.create('Ext.data.Store', {
    id: 'simpsonsStore',
    autoLoad: false,
    fields: ['name', 'email', 'phone'],
    pageSize: itemsPerPage, // items per page
    proxy: {
       type: 'ajax',
       url: 'pagingstore.js', // url that will load data with respect to start and limit params
       reader: {
           type: 'json',
           root: 'items',
           totalProperty: 'total'
       }
    }
});

// specify segment of data you want to load using params
store.load({
    params: {
        start: 0,
        limit: itemsPerPage
    }
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: 'simpsonsStore',
    columns: [{
        text: 'Name',
        dataIndex: 'name'
    }, {
        text: 'Email',
        dataIndex: 'email',
        flex: 1
    }, {
        text: 'Phone',
        dataIndex: 'phone'
    }],
    width: 400,
    height: 125,
    dockedItems: [{
        xtype: 'pagingtoolbar',
        store: 'simpsonsStore', // same store GridPanel is using
        dock: 'bottom',
        displayInfo: true
    }],
    renderTo: Ext.getBody()
});