examples/form/fieldcontainer.js

   1 Ext.require([
   2     'Ext.form.*',
   3     'Ext.data.*',
   4     'Ext.tip.QuickTipManager'
   5 ]);
   6
   7 Ext.onReady(function() {
   8     Ext.QuickTips.init();
   9
  10     Ext.define('Employee', {
  11         extend: 'Ext.data.Model',
  12         fields: [
  13             {name: 'email',     type: 'string'},
  14             {name: 'title',     type: 'string'},
  15             {name: 'firstName', type: 'string'},
  16             {name: 'lastName',  type: 'string'},
  17             {name: 'phone-1',   type: 'string'},
  18             {name: 'phone-2',   type: 'string'},
  19             {name: 'phone-3',   type: 'string'},
  20             {name: 'hours',     type: 'number'},
  21             {name: 'minutes',   type: 'number'},
  22             {name: 'startDate', type: 'date'},
  23             {name: 'endDate',   type: 'date'}
  24         ]
  25     });
  26
  27     var form = Ext.create('Ext.form.Panel', {
  28         renderTo: 'docbody',
  29         title   : 'FieldContainers',
  30         autoHeight: true,
  31         width   : 600,
  32         bodyPadding: 10,
  33         defaults: {
  34             anchor: '100%',
  35             labelWidth: 100
  36         },
  37         items   : [
  38             {
  39                 xtype     : 'textfield',
  40                 name      : 'email',
  41                 fieldLabel: 'Email Address',
  42                 vtype: 'email',
  43                 msgTarget: 'side',
  44                 allowBlank: false
  45             },
  46             {
  47                 xtype: 'fieldcontainer',
  48                 fieldLabel: 'Date Range',
  49                 combineErrors: true,
  50                 msgTarget : 'side',
  51                 layout: 'hbox',
  52                 defaults: {
  53                     flex: 1,
  54                     hideLabel: true
  55                 },
  56                 items: [
  57                     {
  58                         xtype     : 'datefield',
  59                         name      : 'startDate',
  60                         fieldLabel: 'Start',
  61                         margin: '0 5 0 0',
  62                         allowBlank: false
  63                     },
  64                     {
  65                         xtype     : 'datefield',
  66                         name      : 'endDate',
  67                         fieldLabel: 'End',
  68                         allowBlank: false
  69                     }
  70                 ]
  71             },
  72             {
  73                 xtype: 'fieldset',
  74                 title: 'Details',
  75                 collapsible: true,
  76                 defaults: {
  77                     labelWidth: 89,
  78                     anchor: '100%',
  79                     layout: {
  80                         type: 'hbox',
  81                         defaultMargins: {top: 0, right: 5, bottom: 0, left: 0}
  82                     }
  83                 },
  84                 items: [
  85                     {
  86                         xtype: 'fieldcontainer',
  87                         fieldLabel: 'Phone',
  88                         combineErrors: true,
  89                         msgTarget: 'under',
  90                         defaults: {
  91                             hideLabel: true
  92                         },
  93                         items: [
  94                             {xtype: 'displayfield', value: '('},
  95                             {xtype: 'textfield',    fieldLabel: 'Phone 1', name: 'phone-1', width: 29, allowBlank: false},
  96                             {xtype: 'displayfield', value: ')'},
  97                             {xtype: 'textfield',    fieldLabel: 'Phone 2', name: 'phone-2', width: 29, allowBlank: false, margins: '0 5 0 0'},
  98                             {xtype: 'displayfield', value: '-'},
  99                             {xtype: 'textfield',    fieldLabel: 'Phone 3', name: 'phone-3', width: 48, allowBlank: false}
 100                         ]
 101                     },
 102                     {
 103                         xtype: 'fieldcontainer',
 104                         fieldLabel: 'Time worked',
 105                         combineErrors: false,
 106                         defaults: {
 107                             hideLabel: true
 108                         },
 109                         items: [
 110                            {
 111                                name : 'hours',
 112                                xtype: 'numberfield',
 113                                width: 48,
 114                                allowBlank: false
 115                            },
 116                            {
 117                                xtype: 'displayfield',
 118                                value: 'hours'
 119                            },
 120                            {
 121                                name : 'minutes',
 122                                xtype: 'numberfield',
 123                                width: 48,
 124                                allowBlank: false
 125                            },
 126                            {
 127                                xtype: 'displayfield',
 128                                value: 'mins'
 129                            }
 130                         ]
 131                     },
 132                     {
 133                         xtype : 'fieldcontainer',
 134                         combineErrors: true,
 135                         msgTarget: 'side',
 136                         fieldLabel: 'Full Name',
 137                         defaults: {
 138                             hideLabel: true
 139                         },
 140                         items : [
 141                             {
 142                                 //the width of this field in the HBox layout is set directly
 143                                 //the other 2 items are given flex: 1, so will share the rest of the space
 144                                 width:          50,
 145
 146                                 xtype:          'combo',
 147                                 mode:           'local',
 148                                 value:          'mrs',
 149                                 triggerAction:  'all',
 150                                 forceSelection: true,
 151                                 editable:       false,
 152                                 fieldLabel:     'Title',
 153                                 name:           'title',
 154                                 displayField:   'name',
 155                                 valueField:     'value',
 156                                 queryMode: 'local',
 157                                 store:          Ext.create('Ext.data.Store', {
 158                                     fields : ['name', 'value'],
 159                                     data   : [
 160                                         {name : 'Mr',   value: 'mr'},
 161                                         {name : 'Mrs',  value: 'mrs'},
 162                                         {name : 'Miss', value: 'miss'}
 163                                     ]
 164                                 })
 165                             },
 166                             {
 167                                 xtype: 'textfield',
 168                                 flex : 1,
 169                                 name : 'firstName',
 170                                 fieldLabel: 'First',
 171                                 allowBlank: false
 172                             },
 173                             {
 174                                 xtype: 'textfield',
 175                                 flex : 1,
 176                                 name : 'lastName',
 177                                 fieldLabel: 'Last',
 178                                 allowBlank: false,
 179                                 margins: '0'
 180                             }
 181                         ]
 182                     }
 183                 ]
 184             }
 185         ],
 186         buttons: [
 187             {
 188                 text   : 'Load test data',
 189                 handler: function() {
 190                     this.up('form').getForm().loadRecord(Ext.ModelManager.create({
 191                         'email'    : 'abe@sencha.com',
 192                         'title'    : 'mr',
 193                         'firstName': 'Abraham',
 194                         'lastName' : 'Elias',
 195                         'startDate': '01/10/2003',
 196                         'endDate'  : '12/11/2009',
 197                         'phone-1'  : '555',
 198                         'phone-2'  : '123',
 199                         'phone-3'  : '4567',
 200                         'hours'    : 7,
 201                         'minutes'  : 15
 202                     }, 'Employee'));
 203                 }
 204             },
 205             {
 206                 text   : 'Save',
 207                 handler: function() {
 208                     var form = this.up('form').getForm(),
 209                         s = '';
 210                     if (form.isValid()) {
 211                         Ext.iterate(form.getValues(), function(key, value) {
 212                             s += Ext.util.Format.format("{0} = {1}<br />", key, value);
 213                         }, this);
 214
 215                         Ext.Msg.alert('Form Values', s);
 216                     }
 217                 }
 218             },
 219
 220             {
 221                 text   : 'Reset',
 222                 handler: function() {
 223                     this.up('form').getForm().reset();
 224                 }
 225             }
 226         ]
 227     });
 228 });