examples/form/composite-field.js

   1 /*!
   2  * Ext JS Library 3.2.1
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Ext.onReady(function() {
   8     Ext.QuickTips.init();
   9
  10     var form = new Ext.form.FormPanel({
  11         renderTo: 'docbody',
  12         title   : 'Composite Fields',
  13         autoHeight: true,
  14         width   : 600,
  15
  16         bodyStyle: 'padding: 5px',
  17         defaults: {
  18             anchor: '0'
  19         },
  20         items   : [
  21             {
  22                 xtype     : 'textfield',
  23                 name      : 'email',
  24                 fieldLabel: 'Email Address',
  25                 anchor    : '-20'
  26             },
  27             {
  28                 xtype: 'compositefield',
  29                 fieldLabel: 'Date Range',
  30                 msgTarget : 'side',
  31                 anchor    : '-20',
  32                 defaults: {
  33                     flex: 1
  34                 },
  35                 items: [
  36                     {
  37                         xtype     : 'datefield',
  38                         name      : 'startDate',
  39                         fieldLabel: 'Start'
  40                     },
  41                     {
  42                         xtype     : 'datefield',
  43                         name      : 'endDate',
  44                         fieldLabel: 'End'
  45                     }
  46                 ]
  47             },
  48             {
  49                 xtype: 'fieldset',
  50                 title: 'Details',
  51                 collapsible: true,
  52                 items: [
  53                     {
  54                         xtype: 'compositefield',
  55                         fieldLabel: 'Phone',
  56                         // anchor    : '-20',
  57                         // anchor    : null,
  58                         msgTarget: 'under',
  59                         items: [
  60                             {xtype: 'displayfield', value: '('},
  61                             {xtype: 'textfield',    name: 'phone-1', width: 29, allowBlank: false},
  62                             {xtype: 'displayfield', value: ')'},
  63                             {xtype: 'textfield',    name: 'phone-2', width: 29, allowBlank: false, margins: '0 5 0 0'},
  64                             {xtype: 'textfield',    name: 'phone-3', width: 48, allowBlank: false}
  65                         ]
  66                     },
  67                     {
  68                         xtype: 'compositefield',
  69                         fieldLabel: 'Time worked',
  70                         combineErrors: false,
  71                         items: [
  72                            {
  73                                name : 'hours',
  74                                xtype: 'numberfield',
  75                                width: 48,
  76                                allowBlank: false
  77                            },
  78                            {
  79                                xtype: 'displayfield',
  80                                value: 'hours'
  81                            },
  82                            {
  83                                name : 'minutes',
  84                                xtype: 'numberfield',
  85                                width: 48,
  86                                allowBlank: false
  87                            },
  88                            {
  89                                xtype: 'displayfield',
  90                                value: 'mins'
  91                            }
  92                         ]
  93                     },
  94                     {
  95                         xtype : 'compositefield',
  96                         anchor: '-20',
  97                         msgTarget: 'side',
  98                         fieldLabel: 'Full Name',
  99                         items : [
 100                             {
 101                                 //the width of this field in the HBox layout is set directly
 102                                 //the other 2 items are given flex: 1, so will share the rest of the space
 103                                 width:          50,
 104
 105
 106                                 xtype:          'combo',
 107                                 mode:           'local',
 108                                 value:          'mrs',
 109                                 triggerAction:  'all',
 110                                 forceSelection: true,
 111                                 editable:       false,
 112                                 fieldLabel:     'Title',
 113                                 name:           'title',
 114                                 hiddenName:     'title',
 115                                 displayField:   'name',
 116                                 valueField:     'value',
 117                                 store:          new Ext.data.JsonStore({
 118                                     fields : ['name', 'value'],
 119                                     data   : [
 120                                         {name : 'Mr',   value: 'mr'},
 121                                         {name : 'Mrs',  value: 'mrs'},
 122                                         {name : 'Miss', value: 'miss'}
 123                                     ]
 124                                 })
 125                             },
 126                             {
 127                                 xtype: 'textfield',
 128                                 flex : 1,
 129                                 name : 'firstName',
 130                                 fieldLabel: 'First',
 131                                 allowBlank: false
 132                             },
 133                             {
 134                                 xtype: 'textfield',
 135                                 flex : 1,
 136                                 name : 'lastName',
 137                                 fieldLabel: 'Last',
 138                                 allowBlank: false
 139                             }
 140                         ]
 141                     }
 142                 ]
 143             }
 144         ],
 145         buttons: [
 146             {
 147                 text   : 'Load test data',
 148                 handler: function() {
 149                     var Record = Ext.data.Record.create([
 150                        {name: 'email',     type: 'string'},
 151                        {name: 'title',     type: 'string'},
 152                        {name: 'firstName', type: 'string'},
 153                        {name: 'lastName',  type: 'string'},
 154                        {name: 'phone-1',   type: 'string'},
 155                        {name: 'phone-2',   type: 'string'},
 156                        {name: 'phone-3',   type: 'string'},
 157                        {name: 'hours',     type: 'number'},
 158                        {name: 'minutes',   type: 'number'},
 159                        {name: 'startDate', type: 'date'},
 160                        {name: 'endDate',   type: 'date'}
 161                     ]);
 162
 163                     form.form.loadRecord(new Record({
 164                         'email'    : 'ed@extjs.com',
 165                         'title'    : 'mr',
 166                         'firstName': 'Abraham',
 167                         'lastName' : 'Elias',
 168                         'startDate': '01/10/2003',
 169                         'endDate'  : '12/11/2009',
 170                         'phone-1'  : '555',
 171                         'phone-2'  : '123',
 172                         'phone-3'  : '4567',
 173                         'hours'    : 7,
 174                         'minutes'  : 15
 175                     }));
 176                 }
 177             },
 178             {
 179                 text   : 'Save',
 180                 handler: function() {
 181                     if (form.form.isValid()) {
 182                         var s = '';
 183
 184                         Ext.iterate(form.form.getValues(), function(key, value) {
 185                             s += String.format("{0} = {1}<br />", key, value);
 186                         }, this);
 187
 188                         Ext.example.msg('Form Values', s);
 189                     }
 190                 }
 191             },
 192
 193             {
 194                 text   : 'Reset',
 195                 handler: function() {
 196                     form.form.reset();
 197                 }
 198             }
 199         ]
 200     });
 201 });