view
/**
* This is a very simple example of using XML for load and submit of data with an Ext
* dynamic form.
* 这是一个非常简单的例子,使用XML来加载表单数据和提交表单数据
*/
Ext.define('KitchenSink.view.form.XmlForm', {
extend: 'Ext.form.Panel',
xtype: 'form-xml',
controller: 'form-xml',
title:'XML Form',
frame: true,
width: 340,
bodyPadding: 5,
//waitMsgTarget 默认用Ext.MessageBox.wait作为等待消息的显示。你可以以特定元素为目标通过传入它或它的id或者遮罩表单本身传入都合规。
waitMsgTarget: true,
fieldDefaults: {
labelAlign: 'right',
labelWidth: 85,
msgTarget: 'side'
},
// configure how to read the XML data, using an instance
// 用实例配置读取xml数据
reader: {
type: 'xml',
//使用的是contactmodel
model: 'KitchenSink.model.form.Contact',
record: 'contact',
successProperty: '@success'
},
// configure how to read the XML error, using a config
//如何读取xml的错误信息
errorReader: {
type: 'xml',
//使用的错误信息Model
model: 'KitchenSink.model.form.FieldError',
//(Ext.data.reader.Json) record JSON响应中可选位置,用于记录数据发现其本身位置。不常用。
//(Ext.data.reader.Xml) record (必须)对重复元素包含记录信息的DomQuery路径
//有区别
record : 'field',
successProperty: '@success'
},
items: [{
xtype: 'fieldset',
title: 'Contact Information',
defaultType: 'textfield',
defaults: {
width: 280
},
items: [{
fieldLabel: 'First Name',
emptyText: 'First Name',
name: 'first'
}, {
fieldLabel: 'Last Name',
emptyText: 'Last Name',
name: 'last'
}, {
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}, {
xtype: 'combobox',
fieldLabel: 'State',
name: 'state',
store: {
type: 'states'
},
//(可选) 相关的数据值名称绑定到ComboBox。注意:使用“valueField”要求用户进行选择,以便值被映射。参考“displayField”。默认匹配displayField配置的值。
//相关的数据域名称绑定到ComboBox 默认:“text”
//valueField 是能够通过getValue()获取的值;一般用于传到后台(查询的时候用)。
valueField: 'abbr',
displayField: 'state',
typeAhead: true,
queryMode: 'local',
emptyText: 'Select a state...'
}, {
xtype: 'datefield',
fieldLabel: 'Date of Birth',
name: 'dob',
allowBlank: false,
maxValue: new Date()
}]
}],
buttons: [{
text: 'Load',
listeners: {
click: 'onLoadClick'
}
}, {
text: 'Submit',
disabled: true,
formBind: true,
listeners: {
click: 'onSubmitClick'
}
}]
});
contactModel
Ext.define('KitchenSink.model.form.Contact', {
extend: 'KitchenSink.model.Base',
fields: [
{name: 'first', mapping: 'name > first'},
{name: 'last', mapping: 'name > last'},
'company', 'email', 'state',
{name: 'dob', type: 'date', dateFormat: 'm/d/Y'}
]
});
fieldEroor Model
Ext.define('KitchenSink.model.form.FieldError', {
extend: 'KitchenSink.model.Base',
fields: ['msg']
});
//下拉单选框使用的仓库数据
Store
Ext.define('KitchenSink.store.States', {
extend: 'Ext.data.ArrayStore',
alias: 'store.states',
model: 'KitchenSink.model.State',
storeId: 'states',
data: [
[0, 'AL', 'Alabama', 'The Heart of Dixie'],
[1, 'AK', 'Alaska', 'The Land of the Midnight Sun'],
[2, 'AZ', 'Arizona', 'The Grand Canyon State'],
[3, 'AR', 'Arkansas', 'The Natural State'],
[4, 'CA', 'California', 'The Golden State'],
[5, 'CO', 'Colorado', 'The Mountain State'],
[6, 'CT', 'Connecticut', 'The Constitution State'],
[7, 'DE', 'Delaware', 'The First State'],
[8, 'DC', 'District of Columbia', "The Nation's Capital"],
[9, 'FL', 'Florida', 'The Sunshine State'],
[10, 'GA', 'Georgia', 'The Peach State'],
[11, 'HI', 'Hawaii', 'The Aloha State'],
[12, 'ID', 'Idaho', 'Famous Potatoes'],
[13, 'IL', 'Illinois', 'The Prairie State'],
[14, 'IN', 'Indiana', 'The Hospitality State'],
[15, 'IA', 'Iowa', 'The Corn State'],
[16, 'KS', 'Kansas', 'The Sunflower State'],
[17, 'KY', 'Kentucky', 'The Bluegrass State'],
[18, 'LA', 'Louisiana', 'The Bayou State'],
[19, 'ME', 'Maine', 'The Pine Tree State'],
[20, 'MD', 'Maryland', 'Chesapeake State'],
[21, 'MA', 'Massachusetts', 'The Spirit of America'],
[22, 'MI', 'Michigan', 'Great Lakes State'],
[23, 'MN', 'Minnesota', 'North Star State'],
[24, 'MS', 'Mississippi', 'Magnolia State'],
[25, 'MO', 'Missouri', 'Show Me State'],
[26, 'MT', 'Montana', 'Big Sky Country'],
[27, 'NE', 'Nebraska', 'Beef State'],
[28, 'NV', 'Nevada', 'Silver State'],
[29, 'NH', 'New Hampshire', 'Granite State'],
[30, 'NJ', 'New Jersey', 'Garden State'],
[31, 'NM', 'New Mexico', 'Land of Enchantment'],
[32, 'NY', 'New York', 'Empire State'],
[33, 'NC', 'North Carolina', 'First in Freedom'],
[34, 'ND', 'North Dakota', 'Peace Garden State'],
[35, 'OH', 'Ohio', 'The Heart of it All'],
[36, 'OK', 'Oklahoma', 'Oklahoma is OK'],
[37, 'OR', 'Oregon', 'Pacific Wonderland'],
[38, 'PA', 'Pennsylvania', 'Keystone State'],
[39, 'RI', 'Rhode Island', 'Ocean State'],
[40, 'SC', 'South Carolina', 'Nothing Could be Finer'],
[41, 'SD', 'South Dakota', 'Great Faces, Great Places'],
[42, 'TN', 'Tennessee', 'Volunteer State'],
[43, 'TX', 'Texas', 'Lone Star State'],
[44, 'UT', 'Utah', 'Salt Lake State'],
[45, 'VT', 'Vermont', 'Green Mountain State'],
[46, 'VA', 'Virginia', 'Mother of States'],
[47, 'WA', 'Washington', 'Green Tree State'],
[48, 'WV', 'West Virginia', 'Mountain State'],
[49, 'WI', 'Wisconsin', "America's Dairyland"],
[50, 'WY', 'Wyoming', 'Like No Place on Earth']
]
});
//load和submit的操作
viewcontroller
Ext.define('KitchenSink.view.form.XmlFormController', {
extend: 'Ext.app.ViewController',
alias: 'controller.form-xml',
onLoadClick: function() {
this.getView().getForm().load({
url: 'resources/data/form/xml-form-data.xml',
waitMsg: 'Loading...'
});
},
onSubmitClick: function() {
this.getView().getForm().submit({
url: 'resources/data/form/xml-form-errors.xml',
submitEmptyText: false,
waitMsg: 'Saving Data...'
});
}
});
load XML
<?xml version="1.0" encoding="UTF-8"?>
<message success="true">
<contact>
<name>
<first>Aaron</first>
<last>Conran</last>
</name>
<company>Ext JS</company>
<email>support@sencha.com</email>
<state>OH</state>
<dob>04/15/2007</dob>
</contact>
</message>
submit response
<?xml version="1.0" encoding="UTF-8"?>
<message success="false">
<errors>
<field>
<id>first</id>
<msg><![CDATA[
Invalid name. <br /><i>This is a test validation message from the server </i>
]]></msg>
</field>
<field>
<id>dob</id>
<msg><![CDATA[
Invalid Date of Birth. <br /><i>This is a test validation message from the server </i>
]]></msg>
</field>
</errors>
</message>