3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
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.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
18 'Ext.window.MessageBox'
21 Ext.onReady(function() {
25 // The data store for the State comboboxes
26 statesStore = Ext.create('Ext.data.ArrayStore', {
28 data : Ext.example.states // from states.js
31 // The data store for the Month combobox
32 monthsStore = Ext.create('Ext.data.Store', {
33 fields: ['name', 'num'],
36 Ext.Array.forEach(Ext.Date.monthNames, function(name, i) {
37 data[i] = {name: name, num: i + 1};
44 * Common change listener for the Mailing Address fields - if the checkbox to use the same
45 * values for Billing Address is checked, this copies the values over as they change.
47 function onMailingAddrFieldChange(field) {
48 var copyToBilling = formPanel.down('[name=billingSameAsMailing]').getValue();
50 formPanel.down('[name=' + field.billingFieldName + ']').setValue(field.getValue());
55 formPanel = Ext.widget('form', {
56 renderTo: Ext.getBody(),
57 title: 'Complete Check Out',
71 title: 'Your Contact Information',
72 defaultType: 'textfield',
78 xtype: 'fieldcontainer',
82 defaultType: 'textfield',
88 fieldLabel: 'First Name',
94 fieldLabel: 'Last Name',
103 defaultType: 'textfield',
105 fieldLabel: 'Email Address',
111 fieldLabel: 'Phone Number',
115 emptyText: 'xxx-xxx-xxxx',
117 regex: /^\d{3}-\d{3}-\d{4}$/,
118 regexText: 'Must be in the format xxx-xxx-xxxx'
126 title: 'Mailing Address',
127 defaultType: 'textfield',
133 fieldLabel: 'Street Address',
134 name: 'mailingStreet',
135 listeners: {change: onMailingAddrFieldChange},
136 billingFieldName: 'billingStreet',
145 listeners: {change: onMailingAddrFieldChange},
146 billingFieldName: 'billingCity',
151 name: 'mailingState',
152 listeners: {change: onMailingAddrFieldChange},
153 billingFieldName: 'billingState',
159 displayField: 'abbr',
166 fieldLabel: 'Postal Code',
168 name: 'mailingPostalCode',
169 listeners: {change: onMailingAddrFieldChange},
170 billingFieldName: 'billingPostalCode',
174 enforceMaxLength: true,
176 regex: /^\d{5}(\-\d{4})?$/,
177 regexText: 'Must be in the format xxxxx or xxxxx-xxxx'
185 title: 'Billing Address',
192 name: 'billingSameAsMailing',
193 boxLabel: 'Same as Mailing Address?',
196 style: 'margin-bottom:10px',
199 * Enables or disables the billing address fields according to whether the checkbox is checked.
200 * In addition to disabling the fields, they are animated to a low opacity so they don't take
201 * up visual attention.
203 handler: function(me, checked) {
204 var fieldset = me.ownerCt;
205 Ext.Array.forEach(fieldset.previousSibling().query('textfield'), onMailingAddrFieldChange);
206 Ext.Array.forEach(fieldset.query('textfield'), function(field) {
207 field.setDisabled(checked);
208 // Animate the opacity on each field. Would be more efficient to wrap them in a container
209 // and animate the opacity on just the single container element, but IE has a bug where
210 // the alpha filter does not get applied on position:relative children.
211 // This must only be applied when it is not IE6, as it has issues with opacity when cleartype
214 field.el.animate({opacity: checked ? .3 : 1});
220 fieldLabel: 'Street Address',
221 name: 'billingStreet',
222 //style: 'opacity:.3',
232 style: (!Ext.isIE6) ? 'opacity:.3' : '',
238 name: 'billingState',
239 style: (!Ext.isIE6) ? 'opacity:.3' : '',
245 displayField: 'abbr',
253 fieldLabel: 'Postal Code',
255 name: 'billingPostalCode',
256 style: (!Ext.isIE6) ? 'opacity:.3' : '',
261 enforceMaxLength: true,
263 regex: /^\d{5}(\-\d{4})?$/,
264 regexText: 'Must be in the format xxxxx or xxxxx-xxxx'
289 inputValue: 'mastercard',
290 boxLabel: 'MasterCard'
293 boxLabel: 'American Express'
295 inputValue: 'discover',
301 fieldLabel: 'Name On Card',
309 fieldLabel: 'Card Number',
314 enforceMaxLength: true,
317 xtype: 'fieldcontainer',
318 fieldLabel: 'Expiration',
324 name: 'ccExpireMonth',
325 displayField: 'name',
336 xtype: 'numberfield',
337 name: 'ccExpireYear',
340 value: new Date().getFullYear(),
341 minValue: new Date().getFullYear(),
351 handler: function() {
352 this.up('form').getForm().reset();
355 text: 'Complete Purchase',
357 handler: function() {
358 var form = this.up('form').getForm();
359 if (form.isValid()) {
360 Ext.MessageBox.alert('Submitted Values', form.getValues(true));