Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / 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