examples/grid/progress-bar-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.ux.ProgressBarPager'
  25 ]);
  26
  27 Ext.onReady(function(){
  28
  29     var myData = [
  30         ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
  31         ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
  32         ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
  33         ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
  34         ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
  35         ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
  36         ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
  37         ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
  38         ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
  39         ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
  40         ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
  41         ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
  42         ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
  43         ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
  44         ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
  45         ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
  46         ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
  47         ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
  48         ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
  49         ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
  50         ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
  51         ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
  52         ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
  53         ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
  54         ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
  55         ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
  56         ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
  57         ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
  58         ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
  59     ];
  60
  61     // example of custom renderer function
  62     function change(val){
  63         if(val > 0){
  64             return '<span style="color:green;">' + val + '</span>';
  65         }else if(val < 0){
  66             return '<span style="color:red;">' + val + '</span>';
  67         }
  68         return val;
  69     }
  70
  71     // example of custom renderer function
  72     function pctChange(val){
  73         if(val > 0){
  74             return '<span style="color:green;">' + val + '%</span>';
  75         }else if(val < 0){
  76             return '<span style="color:red;">' + val + '%</span>';
  77         }
  78         return val;
  79     }
  80
  81     // register model
  82     Ext.define('Company', {
  83         extend: 'Ext.data.Model',
  84         idProperty: 'company',
  85         fields: [
  86            {name: 'company'},
  87            {name: 'price', type: 'float'},
  88            {name: 'change', type: 'float'},
  89            {name: 'pctChange', type: 'float'},
  90            {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
  91         ]
  92     });
  93
  94
  95     // create the data store
  96     var store = Ext.create('Ext.data.Store', {
  97         model: 'Company',
  98         remoteSort: true,
  99         pageSize: 10,
 100         proxy: {
 101             type: 'pagingmemory',
 102             data: myData,
 103             reader: {
 104                 type: 'array'
 105             }
 106         }
 107     });
 108
 109     // create the Grid
 110     var grid = Ext.create('Ext.grid.Panel', {
 111         title:'Progress Bar Pager',
 112         store: store,
 113         columns: [{
 114                 id:'company',
 115                 text: 'Company',
 116                 sortable: true,
 117                 dataIndex: 'company',
 118                 flex: 1
 119             },{
 120                 text: 'Price',
 121                 sortable: true,
 122                 renderer: Ext.util.Format.usMoney,
 123                 dataIndex: 'price',
 124                 width: 75
 125             },{
 126                 text: 'Change',
 127                 sortable: true,
 128                 renderer: change,
 129                 dataIndex: 'change',
 130                 width: 75
 131             },{
 132                 text: '% Change',
 133                 sortable: true,
 134                 renderer: pctChange,
 135                 dataIndex: 'pctChange',
 136                 width: 75
 137             },{
 138                 text: 'Last Updated',
 139                 sortable: true,
 140                 dataIndex: 'lastChange',
 141                 width: 75
 142         }],
 143         stripeRows: true,
 144         height:320,
 145         width:600,
 146         frame:true,
 147         //resizable: {
 148         //   handles: 's',
 149         //   minHeight: 100
 150         //},
 151         bbar: Ext.create('Ext.PagingToolbar', {
 152             pageSize: 10,
 153             store: store,
 154             displayInfo: true,
 155             plugins: Ext.create('Ext.ux.ProgressBarPager', {})
 156         })
 157     });
 158
 159     grid.render('grid-example');
 160
 161     store.load();
 162 });