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>