PageRenderTime 45ms CodeModel.GetById 17ms RepoModel.GetById 0ms app.codeStats 0ms

/ext-4.0.7/examples/form/checkout.js

https://bitbucket.org/srogerf/javascript
JavaScript | 368 lines | 317 code | 16 blank | 35 comment | 3 complexity | 1f33eaec5c290bd6c45fd1fefb2303dd MD5 | raw file
  1. /*
  2. This file is part of Ext JS 4
  3. Copyright (c) 2011 Sencha Inc
  4. Contact: http://www.sencha.com/contact
  5. GNU General Public License Usage
  6. 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.
  7. If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  8. */
  9. Ext.require([
  10. 'Ext.form.*',
  11. 'Ext.data.*',
  12. 'Ext.window.MessageBox'
  13. ]);
  14. Ext.onReady(function() {
  15. var formPanel,
  16. // The data store for the State comboboxes
  17. statesStore = Ext.create('Ext.data.ArrayStore', {
  18. fields: ['abbr'],
  19. data : Ext.example.states // from states.js
  20. }),
  21. // The data store for the Month combobox
  22. monthsStore = Ext.create('Ext.data.Store', {
  23. fields: ['name', 'num'],
  24. data: (function() {
  25. var data = [];
  26. Ext.Array.forEach(Ext.Date.monthNames, function(name, i) {
  27. data[i] = {name: name, num: i + 1};
  28. });
  29. return data;
  30. })()
  31. });
  32. /**
  33. * Common change listener for the Mailing Address fields - if the checkbox to use the same
  34. * values for Billing Address is checked, this copies the values over as they change.
  35. */
  36. function onMailingAddrFieldChange(field) {
  37. var copyToBilling = formPanel.down('[name=billingSameAsMailing]').getValue();
  38. if (copyToBilling) {
  39. formPanel.down('[name=' + field.billingFieldName + ']').setValue(field.getValue());
  40. }
  41. }
  42. formPanel = Ext.widget('form', {
  43. renderTo: Ext.getBody(),
  44. title: 'Complete Check Out',
  45. frame: true,
  46. width: 550,
  47. bodyPadding: 5,
  48. fieldDefaults: {
  49. labelAlign: 'right',
  50. labelWidth: 90,
  51. msgTarget: 'qtip'
  52. },
  53. items: [
  54. // Contact info
  55. {
  56. xtype: 'fieldset',
  57. title: 'Your Contact Information',
  58. defaultType: 'textfield',
  59. layout: 'anchor',
  60. defaults: {
  61. anchor: '100%'
  62. },
  63. items: [{
  64. xtype: 'fieldcontainer',
  65. fieldLabel: 'Name',
  66. layout: 'hbox',
  67. combineErrors: true,
  68. defaultType: 'textfield',
  69. defaults: {
  70. hideLabel: 'true'
  71. },
  72. items: [{
  73. name: 'firstName',
  74. fieldLabel: 'First Name',
  75. flex: 2,
  76. emptyText: 'First',
  77. allowBlank: false
  78. }, {
  79. name: 'lastName',
  80. fieldLabel: 'Last Name',
  81. flex: 3,
  82. margins: '0 0 0 6',
  83. emptyText: 'Last',
  84. allowBlank: false
  85. }]
  86. }, {
  87. xtype: 'container',
  88. layout: 'hbox',
  89. defaultType: 'textfield',
  90. items: [{
  91. fieldLabel: 'Email Address',
  92. name: 'email',
  93. vtype: 'email',
  94. flex: 1,
  95. allowBlank: false
  96. }, {
  97. fieldLabel: 'Phone Number',
  98. labelWidth: 100,
  99. name: 'phone',
  100. width: 190,
  101. emptyText: 'xxx-xxx-xxxx',
  102. maskRe: /[\d\-]/,
  103. regex: /^\d{3}-\d{3}-\d{4}$/,
  104. regexText: 'Must be in the format xxx-xxx-xxxx'
  105. }]
  106. }]
  107. },
  108. // Mailing Address
  109. {
  110. xtype: 'fieldset',
  111. title: 'Mailing Address',
  112. defaultType: 'textfield',
  113. layout: 'anchor',
  114. defaults: {
  115. anchor: '100%'
  116. },
  117. items: [{
  118. fieldLabel: 'Street Address',
  119. name: 'mailingStreet',
  120. listeners: {change: onMailingAddrFieldChange},
  121. billingFieldName: 'billingStreet',
  122. allowBlank: false
  123. }, {
  124. xtype: 'container',
  125. layout: 'hbox',
  126. items: [{
  127. xtype: 'textfield',
  128. fieldLabel: 'City',
  129. name: 'mailingCity',
  130. listeners: {change: onMailingAddrFieldChange},
  131. billingFieldName: 'billingCity',
  132. flex: 1,
  133. allowBlank: false
  134. }, {
  135. xtype: 'combobox',
  136. name: 'mailingState',
  137. listeners: {change: onMailingAddrFieldChange},
  138. billingFieldName: 'billingState',
  139. fieldLabel: 'State',
  140. labelWidth: 50,
  141. width: 100,
  142. store: statesStore,
  143. valueField: 'abbr',
  144. displayField: 'abbr',
  145. typeAhead: true,
  146. queryMode: 'local',
  147. allowBlank: false,
  148. forceSelection: true
  149. }, {
  150. xtype: 'textfield',
  151. fieldLabel: 'Postal Code',
  152. labelWidth: 80,
  153. name: 'mailingPostalCode',
  154. listeners: {change: onMailingAddrFieldChange},
  155. billingFieldName: 'billingPostalCode',
  156. width: 160,
  157. allowBlank: false,
  158. maxLength: 10,
  159. enforceMaxLength: true,
  160. maskRe: /[\d\-]/,
  161. regex: /^\d{5}(\-\d{4})?$/,
  162. regexText: 'Must be in the format xxxxx or xxxxx-xxxx'
  163. }]
  164. }]
  165. },
  166. // Billing Address
  167. {
  168. xtype: 'fieldset',
  169. title: 'Billing Address',
  170. layout: 'anchor',
  171. defaults: {
  172. anchor: '100%'
  173. },
  174. items: [{
  175. xtype: 'checkbox',
  176. name: 'billingSameAsMailing',
  177. boxLabel: 'Same as Mailing Address?',
  178. hideLabel: true,
  179. checked: true,
  180. style: 'margin-bottom:10px',
  181. /**
  182. * Enables or disables the billing address fields according to whether the checkbox is checked.
  183. * In addition to disabling the fields, they are animated to a low opacity so they don't take
  184. * up visual attention.
  185. */
  186. handler: function(me, checked) {
  187. var fieldset = me.ownerCt;
  188. Ext.Array.forEach(fieldset.previousSibling().query('textfield'), onMailingAddrFieldChange);
  189. Ext.Array.forEach(fieldset.query('textfield'), function(field) {
  190. field.setDisabled(checked);
  191. // Animate the opacity on each field. Would be more efficient to wrap them in a container
  192. // and animate the opacity on just the single container element, but IE has a bug where
  193. // the alpha filter does not get applied on position:relative children.
  194. // This must only be applied when it is not IE6, as it has issues with opacity when cleartype
  195. // is enabled
  196. if (!Ext.isIE6) {
  197. field.el.animate({opacity: checked ? .3 : 1});
  198. }
  199. });
  200. }
  201. }, {
  202. xtype: 'textfield',
  203. fieldLabel: 'Street Address',
  204. name: 'billingStreet',
  205. //style: 'opacity:.3',
  206. disabled: true,
  207. allowBlank: false
  208. }, {
  209. xtype: 'container',
  210. layout: 'hbox',
  211. items: [{
  212. xtype: 'textfield',
  213. fieldLabel: 'City',
  214. name: 'billingCity',
  215. style: (!Ext.isIE6) ? 'opacity:.3' : '',
  216. flex: 1,
  217. disabled: true,
  218. allowBlank: false
  219. }, {
  220. xtype: 'combobox',
  221. name: 'billingState',
  222. style: (!Ext.isIE6) ? 'opacity:.3' : '',
  223. fieldLabel: 'State',
  224. labelWidth: 50,
  225. width: 100,
  226. store: statesStore,
  227. valueField: 'abbr',
  228. displayField: 'abbr',
  229. typeAhead: true,
  230. queryMode: 'local',
  231. disabled: true,
  232. allowBlank: false,
  233. forceSelection: true
  234. }, {
  235. xtype: 'textfield',
  236. fieldLabel: 'Postal Code',
  237. labelWidth: 80,
  238. name: 'billingPostalCode',
  239. style: (!Ext.isIE6) ? 'opacity:.3' : '',
  240. width: 160,
  241. disabled: true,
  242. allowBlank: false,
  243. maxLength: 10,
  244. enforceMaxLength: true,
  245. maskRe: /[\d\-]/,
  246. regex: /^\d{5}(\-\d{4})?$/,
  247. regexText: 'Must be in the format xxxxx or xxxxx-xxxx'
  248. }]
  249. }]
  250. },
  251. // Credit card info
  252. {
  253. xtype: 'fieldset',
  254. title: 'Payment',
  255. layout: 'anchor',
  256. defaults: {
  257. anchor: '100%'
  258. },
  259. items: [{
  260. xtype: 'radiogroup',
  261. layout: 'hbox',
  262. defaults: {
  263. name: 'ccType',
  264. margins: '0 15 0 0'
  265. },
  266. items: [{
  267. inputValue: 'visa',
  268. boxLabel: 'VISA',
  269. checked: true
  270. }, {
  271. inputValue: 'mastercard',
  272. boxLabel: 'MasterCard'
  273. }, {
  274. inputValue: 'amex',
  275. boxLabel: 'American Express'
  276. }, {
  277. inputValue: 'discover',
  278. boxLabel: 'Discover'
  279. }]
  280. }, {
  281. xtype: 'textfield',
  282. name: 'ccName',
  283. fieldLabel: 'Name On Card',
  284. allowBlank: false
  285. }, {
  286. xtype: 'container',
  287. layout: 'hbox',
  288. items: [{
  289. xtype: 'textfield',
  290. name: 'ccNumber',
  291. fieldLabel: 'Card Number',
  292. flex: 1,
  293. allowBlank: false,
  294. minLength: 15,
  295. maxLength: 16,
  296. enforceMaxLength: true,
  297. maskRe: /\d/
  298. }, {
  299. xtype: 'fieldcontainer',
  300. fieldLabel: 'Expiration',
  301. labelWidth: 75,
  302. layout: 'hbox',
  303. width: 235,
  304. items: [{
  305. xtype: 'combobox',
  306. name: 'ccExpireMonth',
  307. displayField: 'name',
  308. valueField: 'num',
  309. queryMode: 'local',
  310. emptyText: 'Month',
  311. hideLabel: true,
  312. margins: '0 6 0 0',
  313. store: monthsStore,
  314. flex: 1,
  315. allowBlank: false,
  316. forceSelection: true
  317. }, {
  318. xtype: 'numberfield',
  319. name: 'ccExpireYear',
  320. hideLabel: true,
  321. width: 55,
  322. value: new Date().getFullYear(),
  323. minValue: new Date().getFullYear(),
  324. allowBlank: false
  325. }]
  326. }]
  327. }]
  328. }
  329. ],
  330. buttons: [{
  331. text: 'Reset',
  332. handler: function() {
  333. this.up('form').getForm().reset();
  334. }
  335. }, {
  336. text: 'Complete Purchase',
  337. width: 150,
  338. handler: function() {
  339. var form = this.up('form').getForm();
  340. if (form.isValid()) {
  341. Ext.MessageBox.alert('Submitted Values', form.getValues(true));
  342. }
  343. }
  344. }]
  345. });
  346. });