examples/form/checkout.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.window.MessageBox'
  19 ]);
  20
  21 Ext.onReady(function() {
  22
  23     var formPanel,
  24
  25         // The data store for the State comboboxes
  26         statesStore = Ext.create('Ext.data.ArrayStore', {
  27             fields: ['abbr'],
  28             data : Ext.example.states // from states.js
  29         }),
  30
  31         // The data store for the Month combobox
  32         monthsStore = Ext.create('Ext.data.Store', {
  33             fields: ['name', 'num'],
  34             data: (function() {
  35                 var data = [];
  36                 Ext.Array.forEach(Ext.Date.monthNames, function(name, i) {
  37                     data[i] = {name: name, num: i + 1};
  38                 });
  39                 return data;
  40             })()
  41         });
  42
  43     /**
  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.
  46      */
  47     function onMailingAddrFieldChange(field) {
  48         var copyToBilling = formPanel.down('[name=billingSameAsMailing]').getValue();
  49         if (copyToBilling) {
  50             formPanel.down('[name=' + field.billingFieldName + ']').setValue(field.getValue());
  51         }
  52     }
  53
  54
  55     formPanel = Ext.widget('form', {
  56         renderTo: Ext.getBody(),
  57         title: 'Complete Check Out',
  58         frame: true,
  59         width: 550,
  60         bodyPadding: 5,
  61         fieldDefaults: {
  62             labelAlign: 'right',
  63             labelWidth: 90,
  64             msgTarget: 'qtip'
  65         },
  66
  67         items: [
  68             // Contact info
  69             {
  70                 xtype: 'fieldset',
  71                 title: 'Your Contact Information',
  72                 defaultType: 'textfield',
  73                 layout: 'anchor',
  74                 defaults: {
  75                     anchor: '100%'
  76                 },
  77                 items: [{
  78                     xtype: 'fieldcontainer',
  79                     fieldLabel: 'Name',
  80                     layout: 'hbox',
  81                     combineErrors: true,
  82                     defaultType: 'textfield',
  83                     defaults: {
  84                         hideLabel: 'true'
  85                     },
  86                     items: [{
  87                         name: 'firstName',
  88                         fieldLabel: 'First Name',
  89                         flex: 2,
  90                         emptyText: 'First',
  91                         allowBlank: false
  92                     }, {
  93                         name: 'lastName',
  94                         fieldLabel: 'Last Name',
  95                         flex: 3,
  96                         margins: '0 0 0 6',
  97                         emptyText: 'Last',
  98                         allowBlank: false
  99                     }]
 100                 }, {
 101                     xtype: 'container',
 102                     layout: 'hbox',
 103                     defaultType: 'textfield',
 104                     items: [{
 105                         fieldLabel: 'Email Address',
 106                         name: 'email',
 107                         vtype: 'email',
 108                         flex: 1,
 109                         allowBlank: false
 110                     }, {
 111                         fieldLabel: 'Phone Number',
 112                         labelWidth: 100,
 113                         name: 'phone',
 114                         width: 190,
 115                         emptyText: 'xxx-xxx-xxxx',
 116                         maskRe: /[\d\-]/,
 117                         regex: /^\d{3}-\d{3}-\d{4}$/,
 118                         regexText: 'Must be in the format xxx-xxx-xxxx'
 119                     }]
 120                 }]
 121             },
 122
 123             // Mailing Address
 124             {
 125                 xtype: 'fieldset',
 126                 title: 'Mailing Address',
 127                 defaultType: 'textfield',
 128                 layout: 'anchor',
 129                 defaults: {
 130                     anchor: '100%'
 131                 },
 132                 items: [{
 133                     fieldLabel: 'Street Address',
 134                     name: 'mailingStreet',
 135                     listeners: {change: onMailingAddrFieldChange},
 136                     billingFieldName: 'billingStreet',
 137                     allowBlank: false
 138                 }, {
 139                     xtype: 'container',
 140                     layout: 'hbox',
 141                     items: [{
 142                         xtype: 'textfield',
 143                         fieldLabel: 'City',
 144                         name: 'mailingCity',
 145                         listeners: {change: onMailingAddrFieldChange},
 146                         billingFieldName: 'billingCity',
 147                         flex: 1,
 148                         allowBlank: false
 149                     }, {
 150                         xtype: 'combobox',
 151                         name: 'mailingState',
 152                         listeners: {change: onMailingAddrFieldChange},
 153                         billingFieldName: 'billingState',
 154                         fieldLabel: 'State',
 155                         labelWidth: 50,
 156                         width: 100,
 157                         store: statesStore,
 158                         valueField: 'abbr',
 159                         displayField: 'abbr',
 160                         typeAhead: true,
 161                         queryMode: 'local',
 162                         allowBlank: false,
 163                         forceSelection: true
 164                     }, {
 165                         xtype: 'textfield',
 166                         fieldLabel: 'Postal Code',
 167                         labelWidth: 80,
 168                         name: 'mailingPostalCode',
 169                         listeners: {change: onMailingAddrFieldChange},
 170                         billingFieldName: 'billingPostalCode',
 171                         width: 160,
 172                         allowBlank: false,
 173                         maxLength: 10,
 174                         enforceMaxLength: true,
 175                         maskRe: /[\d\-]/,
 176                         regex: /^\d{5}(\-\d{4})?$/,
 177                         regexText: 'Must be in the format xxxxx or xxxxx-xxxx'
 178                     }]
 179                 }]
 180             },
 181
 182             // Billing Address
 183             {
 184                 xtype: 'fieldset',
 185                 title: 'Billing Address',
 186                 layout: 'anchor',
 187                 defaults: {
 188                     anchor: '100%'
 189                 },
 190                 items: [{
 191                     xtype: 'checkbox',
 192                     name: 'billingSameAsMailing',
 193                     boxLabel: 'Same as Mailing Address?',
 194                     hideLabel: true,
 195                     checked: true,
 196                     style: 'margin-bottom:10px',
 197
 198                     /**
 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.
 202                      */
 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
 212                             // is enabled
 213                             if (!Ext.isIE6) {
 214                                 field.el.animate({opacity: checked ? .3 : 1});
 215                             }
 216                         });
 217                     }
 218                 }, {
 219                     xtype: 'textfield',
 220                     fieldLabel: 'Street Address',
 221                     name: 'billingStreet',
 222                     //style: 'opacity:.3',
 223                     disabled: true,
 224                     allowBlank: false
 225                 }, {
 226                     xtype: 'container',
 227                     layout: 'hbox',
 228                     items: [{
 229                         xtype: 'textfield',
 230                         fieldLabel: 'City',
 231                         name: 'billingCity',
 232                         style: (!Ext.isIE6) ? 'opacity:.3' : '',
 233                         flex: 1,
 234                         disabled: true,
 235                         allowBlank: false
 236                     }, {
 237                         xtype: 'combobox',
 238                         name: 'billingState',
 239                         style: (!Ext.isIE6) ? 'opacity:.3' : '',
 240                         fieldLabel: 'State',
 241                         labelWidth: 50,
 242                         width: 100,
 243                         store: statesStore,
 244                         valueField: 'abbr',
 245                         displayField: 'abbr',
 246                         typeAhead: true,
 247                         queryMode: 'local',
 248                         disabled: true,
 249                         allowBlank: false,
 250                         forceSelection: true
 251                     }, {
 252                         xtype: 'textfield',
 253                         fieldLabel: 'Postal Code',
 254                         labelWidth: 80,
 255                         name: 'billingPostalCode',
 256                         style: (!Ext.isIE6) ? 'opacity:.3' : '',
 257                         width: 160,
 258                         disabled: true,
 259                         allowBlank: false,
 260                         maxLength: 10,
 261                         enforceMaxLength: true,
 262                         maskRe: /[\d\-]/,
 263                         regex: /^\d{5}(\-\d{4})?$/,
 264                         regexText: 'Must be in the format xxxxx or xxxxx-xxxx'
 265                     }]
 266                 }]
 267             },
 268
 269             // Credit card info
 270             {
 271                 xtype: 'fieldset',
 272                 title: 'Payment',
 273                 layout: 'anchor',
 274                 defaults: {
 275                     anchor: '100%'
 276                 },
 277                 items: [{
 278                     xtype: 'radiogroup',
 279                     layout: 'hbox',
 280                     defaults: {
 281                         name: 'ccType',
 282                         margins: '0 15 0 0'
 283                     },
 284                     items: [{
 285                         inputValue: 'visa',
 286                         boxLabel: 'VISA',
 287                         checked: true
 288                     }, {
 289                         inputValue: 'mastercard',
 290                         boxLabel: 'MasterCard'
 291                     }, {
 292                         inputValue: 'amex',
 293                         boxLabel: 'American Express'
 294                     }, {
 295                         inputValue: 'discover',
 296                         boxLabel: 'Discover'
 297                     }]
 298                 }, {
 299                     xtype: 'textfield',
 300                     name: 'ccName',
 301                     fieldLabel: 'Name On Card',
 302                     allowBlank: false
 303                 }, {
 304                     xtype: 'container',
 305                     layout: 'hbox',
 306                     items: [{
 307                         xtype: 'textfield',
 308                         name: 'ccNumber',
 309                         fieldLabel: 'Card Number',
 310                         flex: 1,
 311                         allowBlank: false,
 312                         minLength: 15,
 313                         maxLength: 16,
 314                         enforceMaxLength: true,
 315                         maskRe: /\d/
 316                     }, {
 317                         xtype: 'fieldcontainer',
 318                         fieldLabel: 'Expiration',
 319                         labelWidth: 75,
 320                         layout: 'hbox',
 321                         width: 235,
 322                         items: [{
 323                             xtype: 'combobox',
 324                             name: 'ccExpireMonth',
 325                             displayField: 'name',
 326                             valueField: 'num',
 327                             queryMode: 'local',
 328                             emptyText: 'Month',
 329                             hideLabel: true,
 330                             margins: '0 6 0 0',
 331                             store: monthsStore,
 332                             flex: 1,
 333                             allowBlank: false,
 334                             forceSelection: true
 335                         }, {
 336                             xtype: 'numberfield',
 337                             name: 'ccExpireYear',
 338                             hideLabel: true,
 339                             width: 55,
 340                             value: new Date().getFullYear(),
 341                             minValue: new Date().getFullYear(),
 342                             allowBlank: false
 343                         }]
 344                     }]
 345                 }]
 346             }
 347         ],
 348
 349         buttons: [{
 350             text: 'Reset',
 351             handler: function() {
 352                 this.up('form').getForm().reset();
 353             }
 354         }, {
 355             text: 'Complete Purchase',
 356             width: 150,
 357             handler: function() {
 358                 var form = this.up('form').getForm();
 359                 if (form.isValid()) {
 360                     Ext.MessageBox.alert('Submitted Values', form.getValues(true));
 361                 }
 362             }
 363         }]
 364
 365     });
 366
 367 });
 368