Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / examples / layout / accordion.html
1 <html>
2 <head>
3     <title>Accordion Layout</title>
4     <!-- Ext -->
5     <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
6     <style type="text/css">
7         html, body {
8             font: normal 12px verdana;
9             margin: 0;
10             padding: 0;
11             border: 0 none;
12             overflow: hidden;
13             height: 100%;
14         }
15         .empty .x-panel-body {
16             padding-top:20px;
17             text-align:center;
18             font-style:italic;
19             color: gray;
20             font-size:11px;
21         }
22     </style>
23 <script type="text/javascript" src="../../bootstrap.js"></script>
24 <script type="text/javascript">
25     Ext.require(['*']);
26
27     Ext.onReady(function(){
28
29         // sample static data for the store
30         var myData = [
31             ['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am'],
32             ['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am'],
33             ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am'],
34             ['American Express Company',            52.55, 0.01,  0.02,  '9/1 12:00am'],
35             ['American International Group, Inc.',  64.13, 0.31,  0.49,  '9/1 12:00am'],
36             ['AT&T Inc.',                           31.61, -0.48, -1.54, '9/1 12:00am'],
37             ['Boeing Co.',                          75.43, 0.53,  0.71,  '9/1 12:00am'],
38             ['Caterpillar Inc.',                    67.27, 0.92,  1.39,  '9/1 12:00am'],
39             ['Citigroup, Inc.',                     49.37, 0.02,  0.04,  '9/1 12:00am'],
40             ['E.I. du Pont de Nemours and Company', 40.48, 0.51,  1.28,  '9/1 12:00am'],
41             ['Exxon Mobil Corp',                    68.1,  -0.43, -0.64, '9/1 12:00am'],
42             ['General Electric Company',            34.14, -0.08, -0.23, '9/1 12:00am'],
43             ['General Motors Corporation',          30.27, 1.09,  3.74,  '9/1 12:00am'],
44             ['Hewlett-Packard Co.',                 36.53, -0.03, -0.08, '9/1 12:00am'],
45             ['Honeywell Intl Inc',                  38.77, 0.05,  0.13,  '9/1 12:00am'],
46             ['Intel Corporation',                   19.88, 0.31,  1.58,  '9/1 12:00am'],
47             ['International Business Machines',     81.41, 0.44,  0.54,  '9/1 12:00am'],
48             ['Johnson & Johnson',                   64.72, 0.06,  0.09,  '9/1 12:00am'],
49             ['JP Morgan & Chase & Co',              45.73, 0.07,  0.15,  '9/1 12:00am'],
50             ['McDonald\'s Corporation',             36.76, 0.86,  2.40,  '9/1 12:00am'],
51             ['Merck & Co., Inc.',                   40.96, 0.41,  1.01,  '9/1 12:00am'],
52             ['Microsoft Corporation',               25.84, 0.14,  0.54,  '9/1 12:00am'],
53             ['Pfizer Inc',                          27.96, 0.4,   1.45,  '9/1 12:00am'],
54             ['The Coca-Cola Company',               45.07, 0.26,  0.58,  '9/1 12:00am'],
55             ['The Home Depot, Inc.',                34.64, 0.35,  1.02,  '9/1 12:00am'],
56             ['The Procter & Gamble Company',        61.91, 0.01,  0.02,  '9/1 12:00am'],
57             ['United Technologies Corporation',     63.26, 0.55,  0.88,  '9/1 12:00am'],
58             ['Verizon Communications',              35.57, 0.39,  1.11,  '9/1 12:00am'],
59             ['Wal-Mart Stores, Inc.',               45.45, 0.73,  1.63,  '9/1 12:00am']
60         ];
61
62         /**
63          * Custom function used for column renderer
64          * @param {Object} val
65          */
66         function change(val) {
67             if (val > 0) {
68                 return '<span style="color:green;">' + val + '</span>';
69             } else if (val < 0) {
70                 return '<span style="color:red;">' + val + '</span>';
71             }
72             return val;
73         }
74
75         /**
76          * Custom function used for column renderer
77          * @param {Object} val
78          */
79         function pctChange(val) {
80             if (val > 0) {
81                 return '<span style="color:green;">' + val + '%</span>';
82             } else if (val < 0) {
83                 return '<span style="color:red;">' + val + '%</span>';
84             }
85             return val;
86         }
87
88         // create the data store
89         var store = Ext.create('Ext.data.ArrayStore', {
90             fields: [
91                {name: 'company'},
92                {name: 'price',      type: 'float'},
93                {name: 'change',     type: 'float'},
94                {name: 'pctChange',  type: 'float'},
95                {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
96             ],
97             data: myData
98         });
99
100         // create the Grid
101         var grid = Ext.create('Ext.grid.Panel', {
102             hideCollapseTool: true,
103             store: store,
104             columnLines: true,
105             columns: [
106                 {
107                     text     : 'Company',
108                     flex     : 1,
109                     sortable : false,
110                     dataIndex: 'company'
111                 },
112                 {
113                     text     : 'Price',
114                     width    : 75,
115                     sortable : true,
116                     renderer : 'usMoney',
117                     dataIndex: 'price'
118                 },
119                 {
120                     text     : 'Change',
121                     width    : 75,
122                     sortable : true,
123                     renderer : change,
124                     dataIndex: 'change'
125                 },
126                 {
127                     text     : '% Change',
128                     width    : 75,
129                     sortable : true,
130                     renderer : pctChange,
131                     dataIndex: 'pctChange'
132                 },
133                 {
134                     text     : 'Last Updated',
135                     width    : 85,
136                     sortable : true,
137                     renderer : Ext.util.Format.dateRenderer('m/d/Y'),
138                     dataIndex: 'lastChange'
139                 },
140                 {
141                     xtype: 'actioncolumn',
142                     width: 50,
143                     items: [{
144                         icon   : '../shared/icons/fam/delete.gif',  // Use a URL in the icon config
145                         tooltip: 'Sell stock',
146                         handler: function(grid, rowIndex, colIndex) {
147                             var rec = store.getAt(rowIndex);
148                             alert("Sell " + rec.get('company'));
149                         }
150                     }, {
151                         getClass: function(v, meta, rec) {          // Or return a class from a function
152                             if (rec.get('change') < 0) {
153                                 this.items[1].tooltip = 'Hold stock';
154                                 return 'alert-col';
155                             } else {
156                                 this.items[1].tooltip = 'Buy stock';
157                                 return 'buy-col';
158                             }
159                         },
160                         handler: function(grid, rowIndex, colIndex) {
161                             var rec = store.getAt(rowIndex);
162                             alert((rec.get('change') < 0 ? "Hold " : "Buy ") + rec.get('company'));
163                         }
164                     }]
165                 }
166             ],
167             title: 'Array Grid (Click header to collapse)',
168             viewConfig: {
169                 stripeRows: true
170             }
171         });
172
173         var item1 = grid;
174
175             var item2 = Ext.create('Ext.Panel', {
176                 title: 'Accordion Item 2',
177                 html: '&lt;empty panel&gt;',
178                 cls:'empty'
179             });
180
181             var item3 = Ext.create('Ext.Panel', {
182                 title: 'Accordion Item 3',
183                 html: '&lt;empty panel&gt;',
184                 cls:'empty'
185             });
186
187             var item4 = Ext.create('Ext.Panel', {
188                 title: 'Accordion Item 4',
189                 html: '&lt;empty panel&gt;',
190                 cls:'empty'
191             });
192
193             var item5 = Ext.create('Ext.Panel', {
194                 title: 'Accordion Item 5',
195                 html: '&lt;empty panel&gt;',
196                 cls:'empty'
197             });
198
199             var accordion = Ext.create('Ext.Panel', {
200                 region:'west',
201                 margins:'5 0 5 5',
202                 split:true,
203                 width: 210,
204                 layout:'accordion',
205                 items: [item1, item2, item3, item4, item5]
206             });
207
208             var viewport = Ext.create('Ext.Viewport', {
209                 layout:'border',
210                 items:[
211                     accordion, {
212                     region:'center',
213                     margins:'5 5 5 0',
214                     cls:'empty',
215                     bodyStyle:'background:#f1f1f1',
216                     html:'<br/><br/>&lt;empty center panel&gt;'
217                 }]
218             });
219         });
220     </script>
221 </head>
222 <body>
223 <script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
224 </body>
225 </html>