3 * Copyright(c) 2006-2010 Ext JS, Inc.
5 * http://www.extjs.com/license
7 Ext.onReady(function() {
10 var form = new Ext.form.FormPanel({
12 title : 'Composite Fields',
16 bodyStyle: 'padding: 5px',
24 fieldLabel: 'Email Address',
28 xtype: 'compositefield',
29 fieldLabel: 'Date Range',
54 xtype: 'compositefield',
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}
68 xtype: 'compositefield',
69 fieldLabel: 'Time worked',
79 xtype: 'displayfield',
89 xtype: 'displayfield',
95 xtype : 'compositefield',
98 fieldLabel: 'Full Name',
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
109 triggerAction: 'all',
110 forceSelection: true,
115 displayField: 'name',
117 store: new Ext.data.JsonStore({
118 fields : ['name', 'value'],
120 {name : 'Mr', value: 'mr'},
121 {name : 'Mrs', value: 'mrs'},
122 {name : 'Miss', value: 'miss'}
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'}
163 form.form.loadRecord(new Record({
164 'email' : 'ed@extjs.com',
166 'firstName': 'Abraham',
167 'lastName' : 'Elias',
168 'startDate': '01/10/2003',
169 'endDate' : '12/11/2009',
180 handler: function() {
181 if (form.form.isValid()) {
184 Ext.iterate(form.form.getValues(), function(key, value) {
185 s += String.format("{0} = {1}<br />", key, value);
188 Ext.example.msg('Form Values', s);
195 handler: function() {