3 * Copyright(c) 2006-2010 Sencha Inc.
5 * http://www.sencha.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',
52 xtype: 'compositefield',
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}
66 xtype: 'compositefield',
67 fieldLabel: 'Time worked',
77 xtype: 'displayfield',
87 xtype: 'displayfield',
93 xtype : 'compositefield',
96 fieldLabel: 'Full Name',
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
107 triggerAction: 'all',
108 forceSelection: true,
113 displayField: 'name',
115 store: new Ext.data.JsonStore({
116 fields : ['name', 'value'],
118 {name : 'Mr', value: 'mr'},
119 {name : 'Mrs', value: 'mrs'},
120 {name : 'Miss', value: 'miss'}
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'}
161 form.form.loadRecord(new Record({
162 'email' : 'ed@extjs.com',
164 'firstName': 'Abraham',
165 'lastName' : 'Elias',
166 'startDate': '01/10/2003',
167 'endDate' : '12/11/2009',
178 handler: function() {
179 if (form.form.isValid()) {
182 Ext.iterate(form.form.getValues(), function(key, value) {
183 s += String.format("{0} = {1}<br />", key, value);
186 Ext.example.msg('Form Values', s);
193 handler: function() {