examples/grid/locking-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 Name',
 102             locked   : true,
 103             width    : 200,
 104             sortable : false,
 105             dataIndex: 'company'
 106         },{
 107             text     : 'Price',
 108             width    : 125,
 109             sortable : true,
 110             renderer : 'usMoney',
 111             dataIndex: 'price'
 112         },{
 113             text     : 'Change',
 114             width    : 125,
 115             sortable : true,
 116             renderer : change,
 117             dataIndex: 'change'
 118         },{
 119             text     : '% Change',
 120             width    : 125,
 121             sortable : true,
 122             renderer : pctChange,
 123             dataIndex: 'pctChange'
 124         },{
 125             text     : 'Last Updated',
 126             width    : 135,
 127             sortable : true,
 128             renderer : Ext.util.Format.dateRenderer('m/d/Y'),
 129             dataIndex: 'lastChange'
 130         }],
 131         height: 350,
 132         width: 600,
 133         title: 'Locking Grid Column',
 134         renderTo: 'grid-example',
 135         viewConfig: {
 136             stripeRows: true
 137         }
 138     });
 139 });
 140