examples/grid/group-header-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     // sample static data for the store
  26     var myData = [
  27         ['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am'],
  28         ['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am'],
  29         ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am'],
  30         ['American Express Company',            52.55, 0.01,  0.02,  '9/1 12:00am'],
  31         ['American International Group, Inc.',  64.13, 0.31,  0.49,  '9/1 12:00am'],
  32         ['AT&T Inc.',                           31.61, -0.48, -1.54, '9/1 12:00am'],
  33         ['Boeing Co.',                          75.43, 0.53,  0.71,  '9/1 12:00am'],
  34         ['Caterpillar Inc.',                    67.27, 0.92,  1.39,  '9/1 12:00am'],
  35         ['Citigroup, Inc.',                     49.37, 0.02,  0.04,  '9/1 12:00am'],
  36         ['E.I. du Pont de Nemours and Company', 40.48, 0.51,  1.28,  '9/1 12:00am'],
  37         ['Exxon Mobil Corp',                    68.1,  -0.43, -0.64, '9/1 12:00am'],
  38         ['General Electric Company',            34.14, -0.08, -0.23, '9/1 12:00am'],
  39         ['General Motors Corporation',          30.27, 1.09,  3.74,  '9/1 12:00am'],
  40         ['Hewlett-Packard Co.',                 36.53, -0.03, -0.08, '9/1 12:00am'],
  41         ['Honeywell Intl Inc',                  38.77, 0.05,  0.13,  '9/1 12:00am'],
  42         ['Intel Corporation',                   19.88, 0.31,  1.58,  '9/1 12:00am'],
  43         ['International Business Machines',     81.41, 0.44,  0.54,  '9/1 12:00am'],
  44         ['Johnson & Johnson',                   64.72, 0.06,  0.09,  '9/1 12:00am'],
  45         ['JP Morgan & Chase & Co',              45.73, 0.07,  0.15,  '9/1 12:00am'],
  46         ['McDonald\'s Corporation',             36.76, 0.86,  2.40,  '9/1 12:00am'],
  47         ['Merck & Co., Inc.',                   40.96, 0.41,  1.01,  '9/1 12:00am'],
  48         ['Microsoft Corporation',               25.84, 0.14,  0.54,  '9/1 12:00am'],
  49         ['Pfizer Inc',                          27.96, 0.4,   1.45,  '9/1 12:00am'],
  50         ['The Coca-Cola Company',               45.07, 0.26,  0.58,  '9/1 12:00am'],
  51         ['The Home Depot, Inc.',                34.64, 0.35,  1.02,  '9/1 12:00am'],
  52         ['The Procter & Gamble Company',        61.91, 0.01,  0.02,  '9/1 12:00am'],
  53         ['United Technologies Corporation',     63.26, 0.55,  0.88,  '9/1 12:00am'],
  54         ['Verizon Communications',              35.57, 0.39,  1.11,  '9/1 12:00am'],
  55         ['Wal-Mart Stores, Inc.',               45.45, 0.73,  1.63,  '9/1 12:00am']
  56     ];
  57
  58     /**
  59      * Custom function used for column renderer
  60      * @param {Object} val
  61      */
  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     /**
  72      * Custom function used for column renderer
  73      * @param {Object} val
  74      */
  75     function pctChange(val) {
  76         if (val > 0) {
  77             return '<span style="color:green;">' + val + '%</span>';
  78         } else if (val < 0) {
  79             return '<span style="color:red;">' + val + '%</span>';
  80         }
  81         return val;
  82     }
  83
  84     // create the data store
  85     var store = Ext.create('Ext.data.ArrayStore', {
  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         data: myData
  94     });
  95
  96     // create the Grid
  97     var grid = Ext.create('Ext.grid.Panel', {
  98         store: store,
  99         columnLines: true,
 100         columns: [{
 101             text     : 'Company',
 102             flex     : 1,
 103             sortable : false,
 104             dataIndex: 'company'
 105         }, {
 106             text: 'Stock Price',
 107             columns: [{
 108                 text     : 'Price',
 109                 width    : 75,
 110                 sortable : true,
 111                 renderer : 'usMoney',
 112                 dataIndex: 'price'
 113             }, {
 114                 text     : 'Change',
 115                 width    : 75,
 116                 sortable : true,
 117                 renderer : change,
 118                 dataIndex: 'change'
 119             }, {
 120                 text     : '% Change',
 121                 width    : 75,
 122                 sortable : true,
 123                 renderer : pctChange,
 124                 dataIndex: 'pctChange'
 125             }]
 126         }, {
 127             text     : 'Last Updated',
 128             width    : 85,
 129             sortable : true,
 130             renderer : Ext.util.Format.dateRenderer('m/d/Y'),
 131             dataIndex: 'lastChange'
 132         }],
 133         height: 350,
 134         width: 600,
 135         title: 'Grouped Header Grid',
 136         renderTo: 'grid-example',
 137         viewConfig: {
 138             stripeRows: true
 139         }
 140     });
 141 });
 142