examples/grid/live-search-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.Loader.setConfig({enabled: true});
  16
  17 Ext.Loader.setPath('Ext.ux', '../ux/');
  18
  19 Ext.require([
  20     'Ext.grid.*',
  21     'Ext.data.*',
  22     'Ext.util.*',
  23     'Ext.tip.QuickTipManager',
  24     'Ext.ux.LiveSearchGridPanel'
  25 ]);
  26
  27 Ext.onReady(function() {
  28     Ext.QuickTips.init();
  29
  30     // sample static data for the store
  31     var myData = [
  32         ['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am'],
  33         ['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am'],
  34         ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am'],
  35         ['American Express Company',            52.55, 0.01,  0.02,  '9/1 12:00am'],
  36         ['American International Group, Inc.',  64.13, 0.31,  0.49,  '9/1 12:00am'],
  37         ['AT&T Inc.',                           31.61, -0.48, -1.54, '9/1 12:00am'],
  38         ['Boeing Co.',                          75.43, 0.53,  0.71,  '9/1 12:00am'],
  39         ['Caterpillar Inc.',                    67.27, 0.92,  1.39,  '9/1 12:00am'],
  40         ['Citigroup, Inc.',                     49.37, 0.02,  0.04,  '9/1 12:00am'],
  41         ['E.I. du Pont de Nemours and Company', 40.48, 0.51,  1.28,  '9/1 12:00am'],
  42         ['Exxon Mobil Corp',                    68.1,  -0.43, -0.64, '9/1 12:00am'],
  43         ['General Electric Company',            34.14, -0.08, -0.23, '9/1 12:00am'],
  44         ['General Motors Corporation',          30.27, 1.09,  3.74,  '9/1 12:00am'],
  45         ['Hewlett-Packard Co.',                 36.53, -0.03, -0.08, '9/1 12:00am'],
  46         ['Honeywell Intl Inc',                  38.77, 0.05,  0.13,  '9/1 12:00am'],
  47         ['Intel Corporation',                   19.88, 0.31,  1.58,  '9/1 12:00am'],
  48         ['International Business Machines',     81.41, 0.44,  0.54,  '9/1 12:00am'],
  49         ['Johnson & Johnson',                   64.72, 0.06,  0.09,  '9/1 12:00am'],
  50         ['JP Morgan & Chase & Co',              45.73, 0.07,  0.15,  '9/1 12:00am'],
  51         ['McDonald\'s Corporation',             36.76, 0.86,  2.40,  '9/1 12:00am'],
  52         ['Merck & Co., Inc.',                   40.96, 0.41,  1.01,  '9/1 12:00am'],
  53         ['Microsoft Corporation',               25.84, 0.14,  0.54,  '9/1 12:00am'],
  54         ['Pfizer Inc',                          27.96, 0.4,   1.45,  '9/1 12:00am'],
  55         ['The Coca-Cola Company',               45.07, 0.26,  0.58,  '9/1 12:00am'],
  56         ['The Home Depot, Inc.',                34.64, 0.35,  1.02,  '9/1 12:00am'],
  57         ['The Procter & Gamble Company',        61.91, 0.01,  0.02,  '9/1 12:00am'],
  58         ['United Technologies Corporation',     63.26, 0.55,  0.88,  '9/1 12:00am'],
  59         ['Verizon Communications',              35.57, 0.39,  1.11,  '9/1 12:00am'],
  60         ['Wal-Mart Stores, Inc.',               45.45, 0.73,  1.63,  '9/1 12:00am']
  61     ];
  62
  63     /**
  64      * Custom function used for column renderer
  65      * @param {Object} val
  66      */
  67     function change(val){
  68         if(val > 0){
  69             return '<span style="color:green;">' + val + '</span>';
  70         }else if(val < 0){
  71             return '<span style="color:red;">' + val + '</span>';
  72         }
  73         return val;
  74     }
  75
  76     /**
  77      * Custom function used for column renderer
  78      * @param {Object} val
  79      */
  80     function pctChange(val){
  81         if(val > 0){
  82             return '<span style="color:green;">' + val + '%</span>';
  83         }else if(val < 0){
  84             return '<span style="color:red;">' + val + '%</span>';
  85         }
  86         return val;
  87     }
  88
  89
  90     // create the data store
  91     var store = Ext.create('Ext.data.ArrayStore', {
  92         fields: [
  93            {name: 'company'},
  94            {name: 'price',      type: 'float'},
  95            {name: 'change',     type: 'float'},
  96            {name: 'pctChange',  type: 'float'},
  97            {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
  98         ],
  99         data: myData
 100     });
 101
 102     // create the Grid, see Ext.
 103     Ext.create('Ext.ux.LiveSearchGridPanel', {
 104         store: store,
 105         columnLines: true,
 106         columns: [
 107             {
 108                 text     : 'Company',
 109                 flex     : 1,
 110                 sortable : false,
 111                 dataIndex: 'company'
 112             },
 113             {
 114                 text     : 'Price',
 115                 width    : 75,
 116                 sortable : true,
 117                 renderer : 'usMoney',
 118                 dataIndex: 'price'
 119             },
 120             {
 121                 text     : 'Change',
 122                 width    : 75,
 123                 sortable : true,
 124                 dataIndex: 'change',
 125                 renderer: change
 126             },
 127             {
 128                 text     : '% Change',
 129                 width    : 75,
 130                 sortable : true,
 131                 dataIndex: 'pctChange',
 132                 renderer: pctChange
 133             },
 134             {
 135                 text     : 'Last Updated',
 136                 width    : 85,
 137                 sortable : true,
 138                 dataIndex: 'lastChange'
 139             }
 140         ],
 141         height: 350,
 142         width: 600,
 143         title: 'Live Search Grid',
 144         renderTo: 'grid-example',
 145         viewConfig: {
 146             stripeRows: true
 147         }
 148     });
 149 });