examples/menu/action-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.Action'
  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     var sellAction = Ext.create('Ext.Action', {
  97         icon   : '../shared/icons/fam/delete.gif',  // Use a URL in the icon config
  98         text: 'Sell stock',
  99         disabled: true,
 100         handler: function(widget, event) {
 101             var rec = grid.getSelectionModel().getSelection()[0];
 102             if (rec) {
 103                 alert("Sell " + rec.get('company'));
 104             } else {
 105                 alert('Please select a company from the grid');
 106             }
 107         }
 108     });
 109     var buyAction = Ext.create('Ext.Action', {
 110         iconCls: 'buy-button',
 111         text: 'Buy stock',
 112         disabled: true,
 113         handler: function(widget, event) {
 114             var rec = grid.getSelectionModel().getSelection()[0];
 115             if (rec) {
 116                 alert("Buy " + rec.get('company'));
 117             } else {
 118                 alert('Please select a company from the grid');
 119             }
 120         }
 121     });
 122
 123     var contextMenu = Ext.create('Ext.menu.Menu', {
 124         items: [
 125             buyAction,
 126             sellAction
 127         ]
 128     });
 129
 130     // create the Grid
 131     var grid = Ext.create('Ext.grid.Panel', {
 132         store: store,
 133         columnLines: true,
 134         columns: [
 135             {
 136                 text     : 'Company',
 137                 flex     : 1,
 138                 sortable : false,
 139                 dataIndex: 'company'
 140             },
 141             {
 142                 text     : 'Price',
 143                 width    : 75,
 144                 sortable : true,
 145                 renderer : 'usMoney',
 146                 dataIndex: 'price'
 147             },
 148             {
 149                 text     : 'Change',
 150                 width    : 75,
 151                 sortable : true,
 152                 renderer : change,
 153                 dataIndex: 'change'
 154             },
 155             {
 156                 text     : '% Change',
 157                 width    : 75,
 158                 sortable : true,
 159                 renderer : pctChange,
 160                 dataIndex: 'pctChange'
 161             },
 162             {
 163                 text     : 'Last Updated',
 164                 width    : 85,
 165                 sortable : true,
 166                 renderer : Ext.util.Format.dateRenderer('m/d/Y'),
 167                 dataIndex: 'lastChange'
 168             }
 169         ],
 170         dockedItems: [{
 171             xtype: 'toolbar',
 172             items: [
 173                 buyAction, sellAction
 174             ]
 175         }],
 176         viewConfig: {
 177             stripeRows: true,
 178             listeners: {
 179                 itemcontextmenu: function(view, rec, node, index, e) {
 180                     e.stopEvent();
 181                     contextMenu.showAt(e.getXY());
 182                     return false;
 183                 }
 184             }
 185         },
 186         height: 350,
 187         width: 600,
 188         title: 'Action Grid',
 189         renderTo: 'grid-example',
 190         stateful: false
 191     });
 192
 193     grid.getSelectionModel().on({
 194         selectionchange: function(sm, selections) {
 195             if (selections.length) {
 196                 buyAction.enable();
 197                 sellAction.enable();
 198             } else {
 199                 buyAction.disable();
 200                 sellAction.disable();
 201             }
 202         }
 203     });
 204 });
 205