examples/form/form-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.form.*',
  17     'Ext.data.*',
  18     'Ext.grid.Panel',
  19     'Ext.layout.container.Column'
  20 ]);
  21
  22
  23 Ext.onReady(function(){
  24
  25     Ext.QuickTips.init();
  26
  27     var bd = Ext.getBody();
  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     var ds = Ext.create('Ext.data.ArrayStore', {
  63         fields: [
  64             {name: 'company'},
  65             {name: 'price',      type: 'float'},
  66             {name: 'change',     type: 'float'},
  67             {name: 'pctChange',  type: 'float'},
  68             {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
  69             // Rating dependent upon performance 0 = best, 2 = worst
  70             {name: 'rating', type: 'int', convert: function(value, record) {
  71                 var pct = record.get('pctChange');
  72                 if (pct < 0) return 2;
  73                 if (pct < 1) return 1;
  74                 return 0;
  75             }}
  76         ],
  77         data: myData
  78     });
  79
  80
  81     // example of custom renderer function
  82     function change(val){
  83         if(val > 0){
  84             return '<span style="color:green;">' + val + '</span>';
  85         }else if(val < 0){
  86             return '<span style="color:red;">' + val + '</span>';
  87         }
  88         return val;
  89     }
  90     // example of custom renderer function
  91     function pctChange(val){
  92         if(val > 0){
  93             return '<span style="color:green;">' + val + '%</span>';
  94         }else if(val < 0){
  95             return '<span style="color:red;">' + val + '%</span>';
  96         }
  97         return val;
  98     }
  99
 100     // render rating as "A", "B" or "C" depending upon numeric value.
 101     function rating(v) {
 102         if (v == 0) return "A";
 103         if (v == 1) return "B";
 104         if (v == 2) return "C";
 105     }
 106
 107
 108     bd.createChild({tag: 'h2', html: 'Using a Grid with a Form'});
 109
 110     /*
 111      * Here is where we create the Form
 112      */
 113     var gridForm = Ext.create('Ext.form.Panel', {
 114         id: 'company-form',
 115         frame: true,
 116         title: 'Company data',
 117         bodyPadding: 5,
 118         width: 750,
 119         layout: 'column',    // Specifies that the items will now be arranged in columns
 120
 121         fieldDefaults: {
 122             labelAlign: 'left',
 123             msgTarget: 'side'
 124         },
 125
 126         items: [{
 127             columnWidth: 0.60,
 128             xtype: 'gridpanel',
 129             store: ds,
 130             height: 400,
 131             title:'Company Data',
 132
 133             columns: [
 134                 {
 135                     id       :'company',
 136                     text   : 'Company',
 137                     flex: 1,
 138                     sortable : true,
 139                     dataIndex: 'company'
 140                 },
 141                 {
 142                     text   : 'Price',
 143                     width    : 75,
 144                     sortable : true,
 145                     dataIndex: 'price'
 146                 },
 147                 {
 148                     text   : 'Change',
 149                     width    : 75,
 150                     sortable : true,
 151                     renderer : change,
 152                     dataIndex: 'change'
 153                 },
 154                 {
 155                     text   : '% Change',
 156                     width    : 75,
 157                     sortable : true,
 158                     renderer : pctChange,
 159                     dataIndex: 'pctChange'
 160                 },
 161                 {
 162                     text   : 'Last Updated',
 163                     width    : 85,
 164                     sortable : true,
 165                     renderer : Ext.util.Format.dateRenderer('m/d/Y'),
 166                     dataIndex: 'lastChange'
 167                 },
 168                 {
 169                     text: 'Rating',
 170                     width: 30,
 171                     sortable: true,
 172                     renderer: rating,
 173                     dataIndex: 'rating'
 174                 }
 175             ],
 176
 177             listeners: {
 178                 selectionchange: function(model, records) {
 179                     if (records[0]) {
 180                         this.up('form').getForm().loadRecord(records[0]);
 181                     }
 182                 }
 183             }
 184         }, {
 185             columnWidth: 0.4,
 186             margin: '0 0 0 10',
 187             xtype: 'fieldset',
 188             title:'Company details',
 189             defaults: {
 190                 width: 240,
 191                 labelWidth: 90
 192             },
 193             defaultType: 'textfield',
 194             items: [{
 195                 fieldLabel: 'Name',
 196                 name: 'company'
 197             },{
 198                 fieldLabel: 'Price',
 199                 name: 'price'
 200             },{
 201                 fieldLabel: '% Change',
 202                 name: 'pctChange'
 203             },{
 204                 xtype: 'datefield',
 205                 fieldLabel: 'Last Updated',
 206                 name: 'lastChange'
 207             }, {
 208                 xtype: 'radiogroup',
 209                 fieldLabel: 'Rating',
 210                 columns: 3,
 211                 defaults: {
 212                     name: 'rating' //Each radio has the same name so the browser will make sure only one is checked at once
 213                 },
 214                 items: [{
 215                     inputValue: '0',
 216                     boxLabel: 'A'
 217                 }, {
 218                     inputValue: '1',
 219                     boxLabel: 'B'
 220                 }, {
 221                     inputValue: '2',
 222                     boxLabel: 'C'
 223                 }]
 224             }]
 225         }],
 226         renderTo: bd
 227     });
 228
 229
 230     gridForm.child('gridpanel').getSelectionModel().select(0);
 231 });