view
/**
* This shows an example of a common shopping cart checkout form. It demonstrates uses
* of FieldContainer and various layouts for arranging and aligning fields, ComboBox
* fields for state and month selection, and listening to change events to automatically
* copy values from Mailing Address to Billing Address fields.
* 这展示了一个普通的购物车付款表。使用了文本容器（fieldContainer）和各种布局方式来布局fields，和下拉单选框。 Mailing Address和实现了数据的Billing Address绑定。
*/
Ext.define('KitchenSink.view.form.Checkout', {
extend: 'Ext.form.Panel',
xtype: 'form-checkout',
frame: true,
title: 'Complete Check Out',
bodyPadding: 5,
//重构store
//流汗，model和store都是继承于Ext.data,时间一长居然记错了
initComponent: function(){
var states = new Ext.data.Store({
model: KitchenSink.model.State,
proxy: {
type: 'memory',
reader: {
type: 'array'
}
},
data: KitchenSink.data.DataSets.states
}),
billingStates = new Ext.data.Store({
model: KitchenSink.model.State,
proxy: {
type: 'memory',
reader: {
type: 'array'
}
},
data: KitchenSink.data.DataSets.states
});
if (!this.monthStore) {
this.self.prototype.monthStore = new Ext.data.Store({
fields: ['name', 'num'],
data: (function() {
var data = new Array(12);
Ext.Array.forEach(Ext.Date.monthNames, function(name, i) {
data[i] = {name: name, num: i + 1};
});
return data;
})()
});
}
Ext.apply(this, {
width: 550,
fieldDefaults: {
labelAlign: 'right',
labelWidth: 90,
msgTarget: Ext.supports.Touch ? 'side' : 'qtip'
},
items: [{
xtype: 'fieldset',
title: 'Your Contact Information',
defaultType: 'textfield',
layout: 'anchor',
defaults: {
anchor: '100%'
},
items: [{
xtype: 'fieldcontainer',
fieldLabel: 'Name',
layout: 'hbox',
combineErrors: true,
defaultType: 'textfield',
defaults: {
hideLabel: 'true'
},
items: [{
name: 'firstName',
fieldLabel: 'First Name',
flex: 2,
emptyText: 'First',
allowBlank: false
}, {
name: 'lastName',
fieldLabel: 'Last Name',
flex: 3,
margin: '0 0 0 6',
emptyText: 'Last',
allowBlank: false
}]
}, {
xtype: 'container',
layout: 'hbox',
defaultType: 'textfield',
margin: '0 0 5 0',
items: [{
fieldLabel: 'Email Address',
name: 'email',
vtype: 'email',
flex: 1,
allowBlank: false
}, {
fieldLabel: 'Phone Number',
labelWidth: 100,
name: 'phone',
width: 200,
emptyText: 'xxx-xxx-xxxx',
maskRe: /[\d\-]/,
regex: /^\d{3}-\d{3}-\d{4}$/,
regexText: 'Must be in the format xxx-xxx-xxxx'
}]
}]
}, {
xtype: 'fieldset',
title: 'Mailing Address',
defaultType: 'textfield',
layout: 'anchor',
defaults: {
anchor: '100%'
},
items: [{
labelWidth: 110,
fieldLabel: 'Street Address',
name: 'mailingStreet',
listeners: {
scope: this,
change: this.onMailingAddrFieldChange
},
billingFieldName: 'billingStreet',
allowBlank: false
}, {
xtype: 'container',
layout: 'hbox',
margin: '0 0 5 0',
items: [{
labelWidth: 110,
xtype: 'textfield',
fieldLabel: 'City',
name: 'mailingCity',
listeners: {
scope: this,
change: this.onMailingAddrFieldChange
},
billingFieldName: 'billingCity',
flex: 1,
allowBlank: false
}, {
xtype: 'combobox',
name: 'mailingState',
forceSelection: true,
enforceMaxLength: true,
listeners: {
scope: this,
change: this.onMailingAddrFieldChange
},
billingFieldName: 'billingState',
fieldLabel: 'State',
labelWidth: 50,
width: 115,
// listConfig什么用20151221
listConfig: {
minWidth: null
},
store: states,
valueField: 'abbr',
displayField: 'abbr',
typeAhead: true,
queryMode: 'local',
allowBlank: false
}, {
xtype: 'textfield',
fieldLabel: 'Postal Code',
labelWidth: 80,
name: 'mailingPostalCode',
listeners: {
scope: this,
change: this.onMailingAddrFieldChange
},
billingFieldName: 'billingPostalCode',
width: 160,
allowBlank: false,
maxLength: 10,
enforceMaxLength: true,
maskRe: /[\d\-]/,
//regex 在校验时，需要在表单项值纸上进行测试的JavaScript RegExp对象(默认为 null)。 如果测试失败，表单项将会使用 regexText 或者 invalidText 进行标记
//5个数组-4个数字
regex: /^\d{5}(\-\d{4})?$/,
regexText: 'Must be in the format xxxxx or xxxxx-xxxx'
}]
}]
}, {
xtype: 'fieldset',
title: 'Billing Address',
layout: 'anchor',
defaults: {
anchor: '100%'
},
items: [{
xtype: 'checkbox',
name: 'billingSameAsMailing',
boxLabel: 'Same as Mailing Address?',
hideLabel: true,
checked: true,
margin: '0 0 10 0',
scope: this,
handler: this.onSameAddressChange
}, {
labelWidth: 110,
xtype: 'textfield',
fieldLabel: 'Street Address',
name: 'billingStreet',
style: 'opacity:.3',
disabled: true,
allowBlank: false
}, {
xtype: 'container',
layout: 'hbox',
margin: '0 0 5 0',
items: [{
labelWidth: 110,
xtype: 'textfield',
fieldLabel: 'City',
name: 'billingCity',
style: 'opacity:.3',
flex: 1,
disabled: true,
allowBlank: false
}, {
xtype: 'combobox',
name: 'billingState',
enforceMaxLength: true,
style: 'opacity:.3',
fieldLabel: 'State',
labelWidth: 50,
listConfig: {
minWidth: null
},
width: 115,
store: billingStates,
valueField: 'abbr',
displayField: 'abbr',
typeAhead: true,
queryMode: 'local',
disabled: true,
allowBlank: false,
forceSelection: true
}, {
xtype: 'textfield',
fieldLabel: 'Postal Code',
labelWidth: 80,
name: 'billingPostalCode',
style: 'opacity:.3',
width: 160,
disabled: true,
allowBlank: false,
maxLength: 10,
enforceMaxLength: true,
maskRe: /[\d\-]/,
regex: /^\d{5}(\-\d{4})?$/,
regexText: 'Must be in the format xxxxx or xxxxx-xxxx'
}]
}]
}, {
xtype: 'fieldset',
title: 'Payment',
layout: 'anchor',
defaults: {
anchor: '100%'
},
items: [{
xtype: 'radiogroup',
layout: {
//默认的情况下, CheckboxGroup将所有可用空间分配给配置的列, 这意味着这些列将会被均匀的分布在容器中.如果需要各列的宽度能够足够满足Checkboxes(或Radios)的宽度, 则可用设置 autoFlex 为 false.默认为true.(就是说不是均匀分布了)
autoFlex: false
},
defaults: {
name: 'ccType',
margin: '0 15 0 0'
},
items: [{
inputValue: 'visa',
boxLabel: 'VISA',
checked: true
}, {
inputValue: 'mastercard',
boxLabel: 'MasterCard'
}, {
inputValue: 'amex',
boxLabel: 'American Express'
}, {
inputValue: 'discover',
boxLabel: 'Discover'
}]
}, {
xtype: 'textfield',
name: 'ccName',
fieldLabel: 'Name On Card',
labelWidth: 110,
allowBlank: false
}, {
xtype: 'container',
layout: 'hbox',
margin: '0 0 5 0',
items: [{
xtype: 'textfield',
name: 'ccNumber',
fieldLabel: 'Card Number',
labelWidth: 110,
flex: 1,
allowBlank: false,
minLength: 15,
maxLength: 16,
enforceMaxLength: true,
maskRe: /\d/
}, {
xtype: 'fieldcontainer',
fieldLabel: 'Expiration',
labelWidth: 75,
layout: 'hbox',
items: [{
xtype: 'combobox',
name: 'ccExpireMonth',
displayField: 'name',
valueField: 'num',
queryMode: 'local',
emptyText: 'Month',
hideLabel: true,
margin: '0 6 0 0',
store: this.monthStore,
width: 100,
allowBlank: false,
forceSelection: true
}, {
xtype: 'numberfield',
name: 'ccExpireYear',
hideLabel: true,
width: 70,
value: new Date().getFullYear(),
minValue: new Date().getFullYear(),
allowBlank: false
}]
}]
}]
}
],
buttons: [{
text: 'Reset',
scope: this,
handler: this.onResetClick
}, {
text: 'Complete Purchase',
width: 150,
scope: this,
handler: this.onCompleteClick
}]
});
this.callParent();
},
onResetClick: function(){
this.getForm().reset();
},
onCompleteClick: function(){
var form = this.getForm();
if (form.isValid()) {
Ext.MessageBox.alert('Submitted Values', form.getValues(true));
}
},
onMailingAddrFieldChange: function(field){
//得到[name=billingSameAsMailing]组件的值，
var copyToBilling = this.down('[name=billingSameAsMailing]').getValue(),
copyField = this.down('[name=' + field.billingFieldName + ']');
if (copyToBilling) {
copyField.setValue(field.getValue());
} else {
copyField.clearInvalid();
}
},
/**
* Enables or disables the billing address fields according to whether the checkbox is checked.
* billing address是否有效取决于checkbox是否被选中
* In addition to disabling the fields, they are animated to a low opacity so they don't take
* up visual attention.
* 除了禁用，还添加了透明的动画效果，这样他们看起来不那么吸引人注意
*/
onSameAddressChange: function(box, checked){
var fieldset = box.ownerCt;
Ext.Array.forEach(fieldset.previousSibling().query('textfield'), this.onMailingAddrFieldChange, this);
Ext.Array.forEach(fieldset.query('textfield'), function(field) {
field.setDisabled(checked);
field.el.animate({opacity: checked ? 0.3 : 1});
});
}
});model
Ext.define('KitchenSink.model.State', {
extend: 'KitchenSink.model.Base',
fields: [
'abbr',
'state',
'description',
'country'
]
});Data
Ext.define('KitchenSink.data.DataSets', {
//单例 当设置为true，这个类将被实例化为单例。
//但是为什么要这么做？20151221
singleton: true,
company: [
[1, '3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
[2, 'Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
[3, 'Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
[4, 'American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
[5, 'American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
[6, 'AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],
[7, 'Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],
[8, 'Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],
[9, 'Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'],
[10, 'E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'],
[11, 'Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'],
[12, 'General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'],
[13, 'General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am'],
[14, 'Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'],
[15, 'Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'],
[16, 'Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'],
[17, 'International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'],
[18, 'Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'],
[19, 'JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'],
[20, 'McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'],
[21, 'Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am'],
[22, 'Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am'],
[23, 'Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am'],
[24, 'The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am'],
[25, 'The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am'],
[26, 'The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am'],
[27, 'United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am'],
[28, 'Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],
[29, 'Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
],
states: [
['AL', 'Alabama', 'The Heart of Dixie'],
['AK', 'Alaska', 'The Land of the Midnight Sun'],
['AZ', 'Arizona', 'The Grand Canyon State'],
['AR', 'Arkansas', 'The Natural State'],
['CA', 'California', 'The Golden State'],
['CO', 'Colorado', 'The Mountain State'],
['CT', 'Connecticut', 'The Constitution State'],
['DE', 'Delaware', 'The First State'],
['DC', 'District of Columbia', "The Nation's Capital"],
['FL', 'Florida', 'The Sunshine State'],
['GA', 'Georgia', 'The Peach State'],
['HI', 'Hawaii', 'The Aloha State'],
['ID', 'Idaho', 'Famous Potatoes'],
['IL', 'Illinois', 'The Prairie State'],
['IN', 'Indiana', 'The Hospitality State'],
['IA', 'Iowa', 'The Corn State'],
['KS', 'Kansas', 'The Sunflower State'],
['KY', 'Kentucky', 'The Bluegrass State'],
['LA', 'Louisiana', 'The Bayou State'],
['ME', 'Maine', 'The Pine Tree State'],
['MD', 'Maryland', 'Chesapeake State'],
['MA', 'Massachusetts', 'The Spirit of America'],
['MI', 'Michigan', 'Great Lakes State'],
['MN', 'Minnesota', 'North Star State'],
['MS', 'Mississippi', 'Magnolia State'],
['MO', 'Missouri', 'Show Me State'],
['MT', 'Montana', 'Big Sky Country'],
['NE', 'Nebraska', 'Beef State'],
['NV', 'Nevada', 'Silver State'],
['NH', 'New Hampshire', 'Granite State'],
['NJ', 'New Jersey', 'Garden State'],
['NM', 'New Mexico', 'Land of Enchantment'],
['NY', 'New York', 'Empire State'],
['NC', 'North Carolina', 'First in Freedom'],
['ND', 'North Dakota', 'Peace Garden State'],
['OH', 'Ohio', 'The Heart of it All'],
['OK', 'Oklahoma', 'Oklahoma is OK'],
['OR', 'Oregon', 'Pacific Wonderland'],
['PA', 'Pennsylvania', 'Keystone State'],
['RI', 'Rhode Island', 'Ocean State'],
['SC', 'South Carolina', 'Nothing Could be Finer'],
['SD', 'South Dakota', 'Great Faces, Great Places'],
['TN', 'Tennessee', 'Volunteer State'],
['TX', 'Texas', 'Lone Star State'],
['UT', 'Utah', 'Salt Lake State'],
['VT', 'Vermont', 'Green Mountain State'],
['VA', 'Virginia', 'Mother of States'],
['WA', 'Washington', 'Green Tree State'],
['WV', 'West Virginia', 'Mountain State'],
['WI', 'Wisconsin', "America's Dairyland"],
['WY', 'Wyoming', 'Like No Place on Earth']
]
});
8277
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
