examples/form/composite-field.js

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