examples/grid/sliding-pager.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 Ext.Loader.setConfig({enabled: true});
  16
  17 Ext.Loader.setPath('Ext.ux', '../ux/');
  18
  19 Ext.require([
  20     'Ext.data.*',
  21     'Ext.grid.*',
  22     'Ext.util.*',
  23     'Ext.ux.data.PagingMemoryProxy',
  24     'Ext.toolbar.Paging',
  25     'Ext.ux.SlidingPager'
  26 ]);
  27
  28 Ext.onReady(function(){
  29
  30     var myData = [
  31         ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
  32         ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
  33         ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
  34         ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
  35         ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
  36         ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
  37         ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
  38         ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
  39         ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
  40         ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
  41         ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
  42         ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
  43         ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
  44         ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
  45         ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
  46         ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
  47         ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
  48         ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
  49         ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
  50         ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
  51         ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
  52         ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
  53         ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
  54         ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
  55         ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
  56         ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
  57         ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
  58         ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
  59         ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
  60     ];
  61
  62     // example of custom renderer function
  63     function change(val){
  64         if(val > 0){
  65             return '<span style="color:green;">' + val + '</span>';
  66         }else if(val < 0){
  67             return '<span style="color:red;">' + val + '</span>';
  68         }
  69         return val;
  70     }
  71
  72     // example of custom renderer function
  73     function pctChange(val){
  74         if(val > 0){
  75             return '<span style="color:green;">' + val + '%</span>';
  76         }else if(val < 0){
  77             return '<span style="color:red;">' + val + '%</span>';
  78         }
  79         return val;
  80     }
  81
  82     // register model
  83     Ext.define('Company', {
  84         extend: 'Ext.data.Model',
  85         idProperty: 'company',
  86         fields: [
  87            {name: 'company'},
  88            {name: 'price', type: 'float'},
  89            {name: 'change', type: 'float'},
  90            {name: 'pctChange', type: 'float'},
  91            {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
  92         ]
  93     });
  94
  95
  96     // create the data store
  97     var store = Ext.create('Ext.data.Store', {
  98         model: 'Company',
  99         remoteSort: true,
 100         pageSize: 10,
 101         proxy: {
 102             type: 'pagingmemory',
 103             data: myData,
 104             reader: {
 105                 type: 'array'
 106             }
 107         }
 108     });
 109
 110     // create the Grid
 111     var grid = Ext.createWidget('gridpanel', {
 112         title:'Sliding Pager',
 113         store: store,
 114         columns: [{
 115                 id:'company',
 116                 text: 'Company',
 117                 sortable: true,
 118                 dataIndex: 'company',
 119                 flex: 1
 120             },{
 121                 text: 'Price',
 122                 sortable: true,
 123                 renderer: Ext.util.Format.usMoney,
 124                 dataIndex: 'price',
 125                 width: 75
 126             },{
 127                 text: 'Change',
 128                 sortable: true,
 129                 renderer: change,
 130                 dataIndex: 'change',
 131                 width: 75
 132             },{
 133                 text: '% Change',
 134                 sortable: true,
 135                 renderer: pctChange,
 136                 dataIndex: 'pctChange',
 137                 width: 75
 138             },{
 139                 text: 'Last Updated',
 140                 sortable: true,
 141                 dataIndex: 'lastChange',
 142                 width: 75
 143             }],
 144         stripeRows: true,
 145         height:320,
 146         width:600,
 147         frame:true,
 148         resizable: {
 149             handles: 's'
 150         },
 151         bbar: Ext.create('Ext.PagingToolbar', {
 152             pageSize: 10,
 153             store: store,
 154             displayInfo: true,
 155             plugins: Ext.create('Ext.ux.SlidingPager', {})
 156         })
 157     });
 158
 159     grid.render('grid-example');
 160
 161     store.load();
 162 });