examples/grid/array-grid.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.require([
  16     'Ext.grid.*',
  17     'Ext.data.*',
  18     'Ext.util.*',
  19     'Ext.state.*'
  20 ]);
  21
  22 Ext.onReady(function() {
  23     Ext.QuickTips.init();
  24
  25     // setup the state provider, all state information will be saved to a cookie
  26     Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
  27
  28     // sample static data for the store
  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     /**
  62      * Custom function used for column renderer
  63      * @param {Object} val
  64      */
  65     function change(val) {
  66         if (val > 0) {
  67             return '<span style="color:green;">' + val + '</span>';
  68         } else if (val < 0) {
  69             return '<span style="color:red;">' + val + '</span>';
  70         }
  71         return val;
  72     }
  73
  74     /**
  75      * Custom function used for column renderer
  76      * @param {Object} val
  77      */
  78     function pctChange(val) {
  79         if (val > 0) {
  80             return '<span style="color:green;">' + val + '%</span>';
  81         } else if (val < 0) {
  82             return '<span style="color:red;">' + val + '%</span>';
  83         }
  84         return val;
  85     }
  86
  87     // create the data store
  88     var store = Ext.create('Ext.data.ArrayStore', {
  89         fields: [
  90            {name: 'company'},
  91            {name: 'price',      type: 'float'},
  92            {name: 'change',     type: 'float'},
  93            {name: 'pctChange',  type: 'float'},
  94            {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
  95         ],
  96         data: myData
  97     });
  98
  99     // create the Grid
 100     var grid = Ext.create('Ext.grid.Panel', {
 101         store: store,
 102         stateful: true,
 103         stateId: 'stateGrid',
 104         columns: [
 105             {
 106                 text     : 'Company',
 107                 flex     : 1,
 108                 sortable : false,
 109                 dataIndex: 'company'
 110             },
 111             {
 112                 text     : 'Price',
 113                 width    : 75,
 114                 sortable : true,
 115                 renderer : 'usMoney',
 116                 dataIndex: 'price'
 117             },
 118             {
 119                 text     : 'Change',
 120                 width    : 75,
 121                 sortable : true,
 122                 renderer : change,
 123                 dataIndex: 'change'
 124             },
 125             {
 126                 text     : '% Change',
 127                 width    : 75,
 128                 sortable : true,
 129                 renderer : pctChange,
 130                 dataIndex: 'pctChange'
 131             },
 132             {
 133                 text     : 'Last Updated',
 134                 width    : 85,
 135                 sortable : true,
 136                 renderer : Ext.util.Format.dateRenderer('m/d/Y'),
 137                 dataIndex: 'lastChange'
 138             },
 139             {
 140                 xtype: 'actioncolumn',
 141                 width: 50,
 142                 items: [{
 143                     icon   : '../shared/icons/fam/delete.gif',  // Use a URL in the icon config
 144                     tooltip: 'Sell stock',
 145                     handler: function(grid, rowIndex, colIndex) {
 146                         var rec = store.getAt(rowIndex);
 147                         alert("Sell " + rec.get('company'));
 148                     }
 149                 }, {
 150                     getClass: function(v, meta, rec) {          // Or return a class from a function
 151                         if (rec.get('change') < 0) {
 152                             this.items[1].tooltip = 'Hold stock';
 153                             return 'alert-col';
 154                         } else {
 155                             this.items[1].tooltip = 'Buy stock';
 156                             return 'buy-col';
 157                         }
 158                     },
 159                     handler: function(grid, rowIndex, colIndex) {
 160                         var rec = store.getAt(rowIndex);
 161                         alert((rec.get('change') < 0 ? "Hold " : "Buy ") + rec.get('company'));
 162                     }
 163                 }]
 164             }
 165         ],
 166         height: 350,
 167         width: 600,
 168         title: 'Array Grid',
 169         renderTo: 'grid-example',
 170         viewConfig: {
 171             stripeRows: true
 172         }
 173     });
 174 });
 175