examples/form/form-grid.js

   1 Ext.require([
   2     'Ext.form.*',
   3     'Ext.data.*',
   4     'Ext.grid.Panel',
   5     'Ext.layout.container.Column'
   6 ]);
   7
   8
   9 Ext.onReady(function(){
  10
  11     Ext.QuickTips.init();
  12
  13     var bd = Ext.getBody();
  14
  15     // sample static data for the store
  16     var myData = [
  17         ['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am'],
  18         ['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am'],
  19         ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am'],
  20         ['American Express Company',            52.55, 0.01,  0.02,  '9/1 12:00am'],
  21         ['American International Group, Inc.',  64.13, 0.31,  0.49,  '9/1 12:00am'],
  22         ['AT&T Inc.',                           31.61, -0.48, -1.54, '9/1 12:00am'],
  23         ['Boeing Co.',                          75.43, 0.53,  0.71,  '9/1 12:00am'],
  24         ['Caterpillar Inc.',                    67.27, 0.92,  1.39,  '9/1 12:00am'],
  25         ['Citigroup, Inc.',                     49.37, 0.02,  0.04,  '9/1 12:00am'],
  26         ['E.I. du Pont de Nemours and Company', 40.48, 0.51,  1.28,  '9/1 12:00am'],
  27         ['Exxon Mobil Corp',                    68.1,  -0.43, -0.64, '9/1 12:00am'],
  28         ['General Electric Company',            34.14, -0.08, -0.23, '9/1 12:00am'],
  29         ['General Motors Corporation',          30.27, 1.09,  3.74,  '9/1 12:00am'],
  30         ['Hewlett-Packard Co.',                 36.53, -0.03, -0.08, '9/1 12:00am'],
  31         ['Honeywell Intl Inc',                  38.77, 0.05,  0.13,  '9/1 12:00am'],
  32         ['Intel Corporation',                   19.88, 0.31,  1.58,  '9/1 12:00am'],
  33         ['International Business Machines',     81.41, 0.44,  0.54,  '9/1 12:00am'],
  34         ['Johnson & Johnson',                   64.72, 0.06,  0.09,  '9/1 12:00am'],
  35         ['JP Morgan & Chase & Co',              45.73, 0.07,  0.15,  '9/1 12:00am'],
  36         ['McDonald\'s Corporation',             36.76, 0.86,  2.40,  '9/1 12:00am'],
  37         ['Merck & Co., Inc.',                   40.96, 0.41,  1.01,  '9/1 12:00am'],
  38         ['Microsoft Corporation',               25.84, 0.14,  0.54,  '9/1 12:00am'],
  39         ['Pfizer Inc',                          27.96, 0.4,   1.45,  '9/1 12:00am'],
  40         ['The Coca-Cola Company',               45.07, 0.26,  0.58,  '9/1 12:00am'],
  41         ['The Home Depot, Inc.',                34.64, 0.35,  1.02,  '9/1 12:00am'],
  42         ['The Procter & Gamble Company',        61.91, 0.01,  0.02,  '9/1 12:00am'],
  43         ['United Technologies Corporation',     63.26, 0.55,  0.88,  '9/1 12:00am'],
  44         ['Verizon Communications',              35.57, 0.39,  1.11,  '9/1 12:00am'],
  45         ['Wal-Mart Stores, Inc.',               45.45, 0.73,  1.63,  '9/1 12:00am']
  46     ];
  47
  48     var ds = Ext.create('Ext.data.ArrayStore', {
  49         fields: [
  50             {name: 'company'},
  51             {name: 'price',      type: 'float'},
  52             {name: 'change',     type: 'float'},
  53             {name: 'pctChange',  type: 'float'},
  54             {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
  55             // Rating dependent upon performance 0 = best, 2 = worst
  56             {name: 'rating', type: 'int', convert: function(value, record) {
  57                 var pct = record.get('pctChange');
  58                 if (pct < 0) return 2;
  59                 if (pct < 1) return 1;
  60                 return 0;
  61             }}
  62         ],
  63         data: myData
  64     });
  65
  66
  67     // example of custom renderer function
  68     function change(val){
  69         if(val > 0){
  70             return '<span style="color:green;">' + val + '</span>';
  71         }else if(val < 0){
  72             return '<span style="color:red;">' + val + '</span>';
  73         }
  74         return val;
  75     }
  76     // example of custom renderer function
  77     function pctChange(val){
  78         if(val > 0){
  79             return '<span style="color:green;">' + val + '%</span>';
  80         }else if(val < 0){
  81             return '<span style="color:red;">' + val + '%</span>';
  82         }
  83         return val;
  84     }
  85
  86     // render rating as "A", "B" or "C" depending upon numeric value.
  87     function rating(v) {
  88         if (v == 0) return "A";
  89         if (v == 1) return "B";
  90         if (v == 2) return "C";
  91     }
  92
  93
  94     bd.createChild({tag: 'h2', html: 'Using a Grid with a Form'});
  95
  96     /*
  97      * Here is where we create the Form
  98      */
  99     var gridForm = Ext.create('Ext.form.Panel', {
 100         id: 'company-form',
 101         frame: true,
 102         title: 'Company data',
 103         bodyPadding: 5,
 104         width: 750,
 105         layout: 'column',    // Specifies that the items will now be arranged in columns
 106
 107         fieldDefaults: {
 108             labelAlign: 'left',
 109             msgTarget: 'side'
 110         },
 111
 112         items: [{
 113             columnWidth: 0.60,
 114             xtype: 'gridpanel',
 115             store: ds,
 116             height: 400,
 117             title:'Company Data',
 118
 119             columns: [
 120                 {
 121                     id       :'company',
 122                     text   : 'Company',
 123                     flex: 1,
 124                     sortable : true,
 125                     dataIndex: 'company'
 126                 },
 127                 {
 128                     text   : 'Price',
 129                     width    : 75,
 130                     sortable : true,
 131                     dataIndex: 'price'
 132                 },
 133                 {
 134                     text   : 'Change',
 135                     width    : 75,
 136                     sortable : true,
 137                     renderer : change,
 138                     dataIndex: 'change'
 139                 },
 140                 {
 141                     text   : '% Change',
 142                     width    : 75,
 143                     sortable : true,
 144                     renderer : pctChange,
 145                     dataIndex: 'pctChange'
 146                 },
 147                 {
 148                     text   : 'Last Updated',
 149                     width    : 85,
 150                     sortable : true,
 151                     renderer : Ext.util.Format.dateRenderer('m/d/Y'),
 152                     dataIndex: 'lastChange'
 153                 },
 154                 {
 155                     text: 'Rating',
 156                     width: 30,
 157                     sortable: true,
 158                     renderer: rating,
 159                     dataIndex: 'rating'
 160                 }
 161             ],
 162
 163             listeners: {
 164                 selectionchange: function(model, records) {
 165                     if (records[0]) {
 166                         this.up('form').getForm().loadRecord(records[0]);
 167                     }
 168                 }
 169             }
 170         }, {
 171             columnWidth: 0.4,
 172             margin: '0 0 0 10',
 173             xtype: 'fieldset',
 174             title:'Company details',
 175             defaults: {
 176                 width: 240,
 177                 labelWidth: 90
 178             },
 179             defaultType: 'textfield',
 180             items: [{
 181                 fieldLabel: 'Name',
 182                 name: 'company'
 183             },{
 184                 fieldLabel: 'Price',
 185                 name: 'price'
 186             },{
 187                 fieldLabel: '% Change',
 188                 name: 'pctChange'
 189             },{
 190                 xtype: 'datefield',
 191                 fieldLabel: 'Last Updated',
 192                 name: 'lastChange'
 193             }, {
 194                 xtype: 'radiogroup',
 195                 fieldLabel: 'Rating',
 196                 columns: 3,
 197                 defaults: {
 198                     name: 'rating' //Each radio has the same name so the browser will make sure only one is checked at once
 199                 },
 200                 items: [{
 201                     inputValue: '0',
 202                     boxLabel: 'A'
 203                 }, {
 204                     inputValue: '1',
 205                     boxLabel: 'B'
 206                 }, {
 207                     inputValue: '2',
 208                     boxLabel: 'C'
 209                 }]
 210             }]
 211         }],
 212         renderTo: bd
 213     });
 214
 215
 216     gridForm.child('gridpanel').getSelectionModel().select(0);
 217 });