examples/form/form-grid.js

   1 /*!
   2  * Ext JS Library 3.0.0
   3  * Copyright(c) 2006-2009 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Ext.onReady(function(){
   8
   9     Ext.QuickTips.init();
  10
  11     // turn on validation errors beside the field globally
  12     Ext.form.Field.prototype.msgTarget = 'side';
  13
  14     var bd = Ext.getBody();
  15
  16 //   Define the Grid data and create the Grid
  17     var myData = [
  18         ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
  19         ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
  20         ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
  21         ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
  22         ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
  23         ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
  24         ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
  25         ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
  26         ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
  27         ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
  28         ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
  29         ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
  30         ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
  31         ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
  32         ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
  33         ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
  34         ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
  35         ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
  36         ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
  37         ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
  38         ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
  39         ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
  40         ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
  41         ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
  42         ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
  43         ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
  44         ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
  45         ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
  46         ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
  47     ];
  48
  49     var ds = new Ext.data.Store({
  50         reader: new Ext.data.ArrayReader({}, [
  51             {name: 'company'},
  52             {name: 'price', type: 'float'},
  53             {name: 'change', type: 'float'},
  54             {name: 'pctChange', type: 'float'},
  55             {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
  56
  57 //          Rating dependent upon performance 0 = best, 2 = worst
  58             {name: 'rating', type: 'int', convert: function(v, rec) {
  59                    if (rec[3] < 0) return 2;
  60                    if (rec[3] < 1) return 1;
  61                    return 0;
  62                }
  63             }
  64         ])
  65     });
  66     ds.loadData(myData);
  67
  68     // example of custom renderer function
  69     function italic(value){
  70         return '<i>' + value + '</i>';
  71     }
  72
  73     // example of custom renderer function
  74     function change(val){
  75         if(val > 0){
  76             return '<span style="color:green;">' + val + '</span>';
  77         }else if(val < 0){
  78             return '<span style="color:red;">' + val + '</span>';
  79         }
  80         return val;
  81     }
  82     // example of custom renderer function
  83     function pctChange(val){
  84         if(val > 0){
  85             return '<span style="color:green;">' + val + '%</span>';
  86         }else if(val < 0){
  87             return '<span style="color:red;">' + val + '%</span>';
  88         }
  89         return val;
  90     }
  91
  92     // render rating as "A", "B" or "C" depending upon numeric value.
  93     function rating(v) {
  94         if (v == 0) return "A"
  95         if (v == 1) return "B"
  96         if (v == 2) return "C"
  97     }
  98
  99     // the DefaultColumnModel expects this blob to define columns. It can be extended to provide
 100     // custom or reusable ColumnModels
 101     var colModel = new Ext.grid.ColumnModel([
 102         {id:'company',header: "Company", width: 160, sortable: true, locked:false, dataIndex: 'company'},
 103         {header: "Price", width: 55, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
 104         {header: "Change", width: 55, sortable: true, renderer: change, dataIndex: 'change'},
 105         {header: "% Change", width: 65, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
 106         {header: "Last Updated", width: 80, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'},
 107         {header: "Rating", width: 40, sortable: true, renderer: rating, dataIndex: 'rating'}
 108     ]);
 109
 110     bd.createChild({tag: 'h2', html: 'Using a Grid with a Form'});
 111
 112 /*
 113  *    Here is where we create the Form
 114  */
 115     var gridForm = new Ext.FormPanel({
 116         id: 'company-form',
 117         frame: true,
 118         labelAlign: 'left',
 119         title: 'Company data',
 120         bodyStyle:'padding:5px',
 121         width: 750,
 122         layout: 'column',    // Specifies that the items will now be arranged in columns
 123         items: [{
 124             columnWidth: 0.60,
 125             layout: 'fit',
 126             items: {
 127                 xtype: 'grid',
 128                 ds: ds,
 129                 cm: colModel,
 130                 sm: new Ext.grid.RowSelectionModel({
 131                     singleSelect: true,
 132                     listeners: {
 133                         rowselect: function(sm, row, rec) {
 134                             Ext.getCmp("company-form").getForm().loadRecord(rec);
 135                         }
 136                     }
 137                 }),
 138                 autoExpandColumn: 'company',
 139                 height: 350,
 140                 title:'Company Data',
 141                 border: true,
 142                 listeners: {
 143                     render: function(g) {
 144                         g.getSelectionModel().selectRow(0);
 145                     },
 146                     delay: 10 // Allow rows to be rendered.
 147                 }
 148             }
 149         },{
 150             columnWidth: 0.4,
 151             xtype: 'fieldset',
 152             labelWidth: 90,
 153             title:'Company details',
 154             defaults: {width: 140, border:false},    // Default config options for child items
 155             defaultType: 'textfield',
 156             autoHeight: true,
 157             bodyStyle: Ext.isIE ? 'padding:0 0 5px 15px;' : 'padding:10px 15px;',
 158             border: false,
 159             style: {
 160                 "margin-left": "10px", // when you add custom margin in IE 6...
 161                 "margin-right": Ext.isIE6 ? (Ext.isStrict ? "-10px" : "-13px") : "0"  // you have to adjust for it somewhere else
 162             },
 163             items: [{
 164                 fieldLabel: 'Name',
 165                 name: 'company'
 166             },{
 167                 fieldLabel: 'Price',
 168                 name: 'price'
 169             },{
 170                 fieldLabel: '% Change',
 171                 name: 'pctChange'
 172             },{
 173                 xtype: 'datefield',
 174                 fieldLabel: 'Last Updated',
 175                 name: 'lastChange'
 176             }, {
 177                 xtype: 'panel',
 178                 layout: 'table',
 179                 layoutConfig: {
 180                     columns: 4
 181                 },
 182                 anchor: '100%',
 183                 defaults: {
 184                     border: false,
 185                     layout: 'form',
 186                     labelWidth: 15,
 187                     style: {
 188                         paddingRight: '10px'
 189                     }
 190                 },
 191
 192 // A radio group: A setValue on any of the following 'radio' inputs using the numeric
 193 // 'rating' field checks the radio instance which has the matching inputValue.
 194                 items: [{
 195                     cellCls: 'x-form-item',
 196                     xtype: 'label',
 197                     text: 'Rating',
 198                        width: 98
 199                 }, {
 200                     items: {
 201                         xtype: 'radio',
 202                         name: 'rating',
 203                         inputValue: '0',
 204                         fieldLabel: 'A'
 205                     }
 206                 }, {
 207                     items: {
 208                         xtype: 'radio',
 209                         name: 'rating',
 210                         inputValue: '1',
 211                         fieldLabel: 'B'
 212                     }
 213                 }, {
 214                     items: {
 215                         xtype: 'radio',
 216                         name: 'rating',
 217                         inputValue: '2',
 218                         fieldLabel: 'C'
 219                     }
 220                 }]
 221             }]
 222         }],
 223         renderTo: bd
 224     });
 225
 226     //  Create Panel view code. Ignore.
 227     createCodePanel('form-grid.js', 'View code to create this Form');
 228 });