examples/form/fieldcontainer.js

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