extjs/build/examples/kitchensink/classic/samples/view/form/FormGrid.js

   1 /**
   2  * This Form demonstrates the fact that by virtue of inheriting from the Ext.Container
   3  * class, an Ext.form.Panel can contain any Ext.Component. This includes all the
   4  * subclasses of Ext.Panel, including the GridPanel.
   5  *
   6  * The Grid demonstrates the use of creation of derived fields in a Record created using a
   7  * custom `convert` function, and the use of column renderers.
   8  *
   9  * The Form demonstrates the use of radio buttons grouped by name being set by the value
  10  * of the derived rating field.
  11  */
  12 Ext.define('KitchenSink.view.form.FormGrid', {
  13     extend: 'Ext.form.Panel',
  14     xtype: 'form-grid',
  15
  16     //<example>
  17     requires: [
  18         'Ext.grid.*',
  19         'Ext.form.*',
  20         'Ext.layout.container.Column',
  21         'KitchenSink.model.Company'
  22     ],
  23
  24     exampleTitle: 'Dynamic Form interacting with an embedded Grid',
  25     otherContent: [{
  26         type: 'Model',
  27         path: 'classic/samples/model/Company.js'
  28     }],
  29     profiles: {
  30         classic: {
  31             width: 750,
  32             gridWidth: 0.6,
  33             formWidth: 0.4,
  34             percentChangeColumnWidth: 75,
  35             lastUpdatedColumnWidth: 85,
  36             ratingColumnWidth: 30
  37         },
  38         neptune: {
  39             width: 880,
  40             gridWidth: 0.65,
  41             formWidth: 0.35,
  42             percentChangeColumnWidth: 100,
  43             lastUpdatedColumnWidth: 115,
  44             ratingColumnWidth: 60
  45         }
  46     },
  47     //</example>
  48
  49     frame: true,
  50     title: 'Company data',
  51     bodyPadding: 5,
  52     layout: 'column',
  53
  54     // In this example, configuration is applied at initComponent time
  55     // because it depends on profileInfo object that is generated for the
  56     // FormGrid instance.
  57     initComponent: function() {
  58         Ext.apply(this, {
  59             width: this.profileInfo.width,
  60             fieldDefaults: {
  61                 labelAlign: 'left',
  62                 labelWidth: 90,
  63                 anchor: '100%',
  64                 msgTarget: 'side'
  65             },
  66
  67             items: [{
  68                 columnWidth: this.profileInfo.gridWidth,
  69                 xtype: 'gridpanel',
  70                 store: new Ext.data.Store({
  71                     model: KitchenSink.model.Company,
  72                     proxy: {
  73                         type: 'memory',
  74                         reader: {
  75                             type: 'array'
  76                         }
  77                     },
  78                     data: KitchenSink.data.DataSets.company
  79                 }),
  80                 height: 400,
  81                 columns: [{
  82                     text: 'Company',
  83                     flex: 1,
  84                     sortable: true,
  85                     dataIndex: 'name'
  86                 }, {
  87                     text: 'Price',
  88                     width: 75,
  89                     sortable: true,
  90                     dataIndex: 'price'
  91                 }, {
  92                     text: 'Change',
  93                     width: 80,
  94                     sortable: true,
  95                     renderer: this.changeRenderer,
  96                     dataIndex: 'change'
  97                 }, {
  98                     text: '% Change',
  99                     width: this.profileInfo.percentChangeColumnWidth,
 100                     sortable: true,
 101                     renderer: this.pctChangeRenderer,
 102                     dataIndex: 'pctChange'
 103                 }, {
 104                     text: 'Last Updated',
 105                     width: this.profileInfo.lastUpdatedColumnWidth,
 106                     sortable: true,
 107                     formatter: 'date("m/d/Y")',
 108                     dataIndex: 'lastChange'
 109                 }, {
 110                     text: 'Rating',
 111                     width: this.profileInfo.ratingColumnWidth,
 112                     sortable: true,
 113                     renderer: this.renderRating,
 114                     dataIndex: 'rating'
 115                 }],
 116                 listeners: {
 117                     scope: this,
 118                     selectionchange: this.onSelectionChange
 119                 }
 120             }, {
 121                 columnWidth: this.profileInfo.formWidth,
 122                 margin: '0 0 0 10',
 123                 xtype: 'fieldset',
 124                 title:'Company details',
 125                 layout: 'anchor',
 126                 defaultType: 'textfield',
 127                 items: [{
 128                     fieldLabel: 'Name',
 129                     name: 'name'
 130                 },{
 131                     fieldLabel: 'Price',
 132                     name: 'price'
 133                 },{
 134                     fieldLabel: '% Change',
 135                     name: 'pctChange'
 136                 },{
 137                     xtype: 'datefield',
 138                     fieldLabel: 'Last Updated',
 139                     name: 'lastChange'
 140                 }, {
 141                     xtype: 'radiogroup',
 142                     fieldLabel: 'Rating',
 143                     columns: 3,
 144                     defaults: {
 145                         name: 'rating' //Each radio has the same name so the browser will make sure only one is checked at once
 146                     },
 147                     items: [{
 148                         inputValue: '0',
 149                         boxLabel: 'A'
 150                     }, {
 151                         inputValue: '1',
 152                         boxLabel: 'B'
 153                     }, {
 154                         inputValue: '2',
 155                         boxLabel: 'C'
 156                     }]
 157                 }]
 158             }]
 159         });
 160         this.callParent();
 161     },
 162
 163     changeRenderer: function(val) {
 164         if (val > 0) {
 165             return '<span style="color:green;">' + val + '</span>';
 166         } else if(val < 0) {
 167             return '<span style="color:red;">' + val + '</span>';
 168         }
 169         return val;
 170     },
 171
 172     pctChangeRenderer: function(val){
 173         if (val > 0) {
 174             return '<span style="color:green;">' + val + '%</span>';
 175         } else if(val < 0) {
 176             return '<span style="color:red;">' + val + '%</span>';
 177         }
 178         return val;
 179     },
 180
 181     renderRating: function(val){
 182         switch (val) {
 183             case 0:
 184                 return 'A';
 185             case 1:
 186                 return 'B';
 187             case 2:
 188                 return 'C';
 189         }
 190     },
 191
 192     onSelectionChange: function(model, records) {
 193         var rec = records[0];
 194         if (rec) {
 195             this.getForm().loadRecord(rec);
 196         }
 197     }
 198 });