]>
Commit | Line | Data |
---|---|---|
6527f429 DM |
1 | <!DOCTYPE html>\r |
2 | <html>\r | |
3 | <head>\r | |
4 | <meta http-equiv="X-UA-Compatible" content="IE=edge">\r | |
5 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />\r | |
6 | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">\r | |
7 | <title>Stateful Array Grid Example</title>\r | |
8 | <link rel="stylesheet" type="text/css" href="../shared/examples.css" />\r | |
9 | \r | |
10 | <!-- GC -->\r | |
11 | \r | |
12 | <script type="text/javascript" src="../shared/include-ext.js"></script>\r | |
13 | <script type="text/javascript" src="../shared/options-toolbar.js"></script>\r | |
14 | \r | |
15 | <!-- page specific -->\r | |
16 | <style type="text/css">\r | |
17 | /* style rows on mouseover */\r | |
18 | .x-grid-row-over .x-grid-cell-inner {\r | |
19 | font-weight: bold;\r | |
20 | }\r | |
21 | /* shared styles for the ActionColumn icons */\r | |
22 | .x-action-col-cell img {\r | |
23 | height: 16px;\r | |
24 | width: 16px;\r | |
25 | cursor: pointer;\r | |
26 | }\r | |
27 | /* custom icon for the "buy" ActionColumn icon */\r | |
28 | .x-action-col-cell img.buy-col {\r | |
29 | background-image: url(../shared/icons/fam/accept.png);\r | |
30 | }\r | |
31 | /* custom icon for the "alert" ActionColumn icon */\r | |
32 | .x-action-col-cell img.alert-col {\r | |
33 | background-image: url(../shared/icons/fam/error.png);\r | |
34 | }\r | |
35 | \r | |
36 | .x-ie6 .x-action-col-cell img.buy-col {\r | |
37 | background-image: url(../shared/icons/fam/accept.gif);\r | |
38 | }\r | |
39 | .x-ie6.x-action-col-cell img.alert-col {\r | |
40 | background-image: url(../shared/icons/fam/error.gif);\r | |
41 | }\r | |
42 | \r | |
43 | .x-ie6 .x-action-col-cell img {\r | |
44 | position:relative;\r | |
45 | top:-1px;\r | |
46 | }\r | |
47 | </style>\r | |
48 | <script type="text/javascript">\r | |
49 | Ext.require([\r | |
50 | 'Ext.grid.*',\r | |
51 | 'Ext.data.*',\r | |
52 | 'Ext.util.*',\r | |
53 | 'Ext.state.*'\r | |
54 | ]);\r | |
55 | \r | |
56 | Ext.onReady(function() {\r | |
57 | Ext.QuickTips.init();\r | |
58 | \r | |
59 | // setup the state provider, all state information will be saved to a cookie\r | |
60 | Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));\r | |
61 | \r | |
62 | // sample static data for the store\r | |
63 | var myData = [\r | |
64 | ['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],\r | |
65 | ['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],\r | |
66 | ['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],\r | |
67 | ['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],\r | |
68 | ['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],\r | |
69 | ['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],\r | |
70 | ['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],\r | |
71 | ['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],\r | |
72 | ['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'],\r | |
73 | ['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'],\r | |
74 | ['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'],\r | |
75 | ['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'],\r | |
76 | ['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am'],\r | |
77 | ['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'],\r | |
78 | ['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'],\r | |
79 | ['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'],\r | |
80 | ['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'],\r | |
81 | ['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'],\r | |
82 | ['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'],\r | |
83 | ['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'],\r | |
84 | ['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am'],\r | |
85 | ['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am'],\r | |
86 | ['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am'],\r | |
87 | ['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am'],\r | |
88 | ['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am'],\r | |
89 | ['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am'],\r | |
90 | ['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am'],\r | |
91 | ['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],\r | |
92 | ['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']\r | |
93 | ];\r | |
94 | \r | |
95 | /**\r | |
96 | * Custom function used for column renderer\r | |
97 | * @param {Object} val\r | |
98 | */\r | |
99 | function change(val) {\r | |
100 | if (val > 0) {\r | |
101 | return '<span style="color:green;">' + val + '</span>';\r | |
102 | } else if (val < 0) {\r | |
103 | return '<span style="color:red;">' + val + '</span>';\r | |
104 | }\r | |
105 | return val;\r | |
106 | }\r | |
107 | \r | |
108 | /**\r | |
109 | * Custom function used for column renderer\r | |
110 | * @param {Object} val\r | |
111 | */\r | |
112 | function pctChange(val) {\r | |
113 | if (val > 0) {\r | |
114 | return '<span style="color:green;">' + val + '%</span>';\r | |
115 | } else if (val < 0) {\r | |
116 | return '<span style="color:red;">' + val + '%</span>';\r | |
117 | }\r | |
118 | return val;\r | |
119 | }\r | |
120 | \r | |
121 | // create the data store\r | |
122 | var store = Ext.create('Ext.data.ArrayStore', {\r | |
123 | fields: [\r | |
124 | {name: 'company'},\r | |
125 | {name: 'price', type: 'float'},\r | |
126 | {name: 'change', type: 'float'},\r | |
127 | {name: 'pctChange', type: 'float'},\r | |
128 | {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}\r | |
129 | ],\r | |
130 | data: myData\r | |
131 | });\r | |
132 | \r | |
133 | var recs;\r | |
134 | var removeButton = Ext.create('Ext.Button', {\r | |
135 | text: "Remove all",\r | |
136 | handler: function() {\r | |
137 | recs = store.getRange();\r | |
138 | store.removeAll();\r | |
139 | addButton.enable();\r | |
140 | }\r | |
141 | });\r | |
142 | var addButton = Ext.create('Ext.Button', {\r | |
143 | text: 'Add back',\r | |
144 | disabled: true,\r | |
145 | handler: function() {\r | |
146 | if (recs) {\r | |
147 | store.add(recs);\r | |
148 | removeButton.enable();\r | |
149 | this.disable();\r | |
150 | recs = null;\r | |
151 | }\r | |
152 | }\r | |
153 | });\r | |
154 | \r | |
155 | // create the Grid\r | |
156 | var grid = Ext.create('Ext.grid.Panel', {\r | |
157 | store: store,\r | |
158 | stateful: true,\r | |
159 | stateId: 'stateGrid',\r | |
160 | columns: [\r | |
161 | {\r | |
162 | text : 'Company',\r | |
163 | flex : 1,\r | |
164 | sortable : false,\r | |
165 | dataIndex: 'company'\r | |
166 | },\r | |
167 | {\r | |
168 | text : 'Price',\r | |
169 | width : 75,\r | |
170 | sortable : true,\r | |
171 | formatter: 'usMoney',\r | |
172 | dataIndex: 'price'\r | |
173 | },\r | |
174 | {\r | |
175 | text : 'Change',\r | |
176 | width : 75,\r | |
177 | sortable : true,\r | |
178 | renderer : change,\r | |
179 | dataIndex: 'change'\r | |
180 | },\r | |
181 | {\r | |
182 | text : '% Change',\r | |
183 | width : 75,\r | |
184 | sortable : true,\r | |
185 | renderer : pctChange,\r | |
186 | dataIndex: 'pctChange'\r | |
187 | },\r | |
188 | {\r | |
189 | text : 'Last Updated',\r | |
190 | width : 85,\r | |
191 | sortable : true,\r | |
192 | formatter: 'date("m/d/Y")',\r | |
193 | dataIndex: 'lastChange'\r | |
194 | },\r | |
195 | {\r | |
196 | xtype: 'actioncolumn',\r | |
197 | width: 50,\r | |
198 | items: [{\r | |
199 | icon : '../shared/icons/fam/delete.gif', // Use a URL in the icon config\r | |
200 | tooltip: 'Sell stock',\r | |
201 | handler: function(grid, rowIndex, colIndex) {\r | |
202 | var rec = store.getAt(rowIndex);\r | |
203 | alert("Sell " + rec.get('company'));\r | |
204 | }\r | |
205 | }, {\r | |
206 | getClass: function(v, meta, rec) { // Or return a class from a function\r | |
207 | if (rec.get('change') < 0) {\r | |
208 | this.items[1].tooltip = 'Hold stock';\r | |
209 | return 'alert-col';\r | |
210 | } else {\r | |
211 | this.items[1].tooltip = 'Buy stock';\r | |
212 | return 'buy-col';\r | |
213 | }\r | |
214 | },\r | |
215 | handler: function(grid, rowIndex, colIndex) {\r | |
216 | var rec = store.getAt(rowIndex);\r | |
217 | alert((rec.get('change') < 0 ? "Hold " : "Buy ") + rec.get('company'));\r | |
218 | }\r | |
219 | }]\r | |
220 | }\r | |
221 | ],\r | |
222 | height: 350,\r | |
223 | width: 600,\r | |
224 | title: 'Array Grid',\r | |
225 | renderTo: document.body,\r | |
226 | viewConfig: {\r | |
227 | stripeRows: true\r | |
228 | },\r | |
229 | bbar : [removeButton, addButton]\r | |
230 | });\r | |
231 | \r | |
232 | \r | |
233 | });\r | |
234 | \r | |
235 | </script>\r | |
236 | </head>\r | |
237 | <body></body>\r | |
238 | </html>\r |