docs/guides/grid/examples/paging_toolbar/app.js

   1 /**
   2  * @example Paging Toolbar
   3  *
   4  * This example demonstrates loading data in pages dynamically from the server using a {@link Ext.toolbar.Paging Paging Toolbar}.
   5  * Note, that since there is no back end (data is loaded from a static file at `data/users.json`) each page will show the same data set.
   6  */
   7 Ext.require('Ext.data.Store');
   8 Ext.require('Ext.grid.Panel');
   9 Ext.require('Ext.toolbar.Paging');
  10
  11 Ext.define('User', {
  12     extend: 'Ext.data.Model',
  13     fields: [ 'name', 'email', 'phone' ]
  14 });
  15
  16 Ext.onReady(function() {
  17
  18     var userStore = Ext.create('Ext.data.Store', {
  19         model: 'User',
  20         autoLoad: true,
  21         pageSize: 4,
  22         proxy: {
  23             type: 'ajax',
  24             url : 'data/users.json',
  25             reader: {
  26                 type: 'json',
  27                 root: 'users',
  28                 totalProperty: 'total'
  29             }
  30         }
  31     });
  32
  33     Ext.create('Ext.grid.Panel', {
  34         renderTo: Ext.getBody(),
  35         store: userStore,
  36         width: 400,
  37         height: 200,
  38         title: 'Application Users',
  39         columns: [
  40             {
  41                 text: 'Name',
  42                 width: 100,
  43                 dataIndex: 'name'
  44             },
  45             {
  46                 text: 'Email Address',
  47                 width: 150,
  48                 dataIndex: 'email'
  49             },
  50             {
  51                 text: 'Phone Number',
  52                 flex: 1,
  53                 dataIndex: 'phone'
  54             }
  55         ],
  56         dockedItems: [{
  57             xtype: 'pagingtoolbar',
  58             store: userStore,   // same store GridPanel is using
  59             dock: 'bottom',
  60             displayInfo: true
  61         }]
  62     });
  63
  64 });