/**
* AjaxWithXmlForm示例
* 说明:加载XML数据入Form示例;提交数据后从XML文件返回无效信息;
*/
Ext.require([
"Ext.form.*",
"Ext.data.*"
]);
Ext.onReady(function() {
// example.contact 模型
Ext.define('example.contact', {
extend: "Ext.data.Model",
fields: [
{name: "first", mapping: "name > first"},
{name: "last", mapping: "name > last"},
"company", "email", "state", // 国家-地区;
{name: "dob", type: "date", dateFormat: "m/d/Y"} // 生日;
]
});
// example.fielderror 模型
Ext.define('example.fielderror', {
extend: "Ext.data.Model",
fields: ["id", "msg"]
});
var fpanel = Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title: "XML Form",
frame: true,
width: 350,
waitMsgTarget: true,
fieldDefaults: {
labelAlign: "right",
labelWidth: 75,
msgTarget: "side"
},
// configure how to read the XML data:
reader: Ext.create('Ext.data.reader.Xml', {
model: "example.contact",
record: "contact",
successProperty: "@success"
}),
// configure how to read the XML errors:
errorReader: Ext.create('Ext.data.reader.Xml', {
model: "example.fielderror",
record: "field",
successProperty: "@success"
}),
items: [{
xtype: "fieldset",
title: "ContactInformation",
defaultType: "textfield",
defaults: {
width: 280
},
items: [{
fieldLabel: "First Name",
name: "first",
emptyText: "FirstName"
}, {
fieldLabel: "Last Name",
name: "last",
emptyText: "LastName"
}, {
fieldLabel: "公司名称",
name: "company"
}, {
fieldLabel: "邮箱地址",
name: "email",
vtype: "email"
}, { // 国家-地区
fieldLabel: "区域",
name: "state",
xtype: "combobox",
store: Ext.create('Ext.data.ArrayStore', {
fields: ["code", "name"],
data: [
['001', '北京', '中国首府'],
['002', '上海', '中国经济中心']
]
}),
valueField: "code",
displayField: "name",
typeAhead: true,
queryMode: "local",
emptyText: "Select a state..."
}, {
fieldLabel: "出生日期",
name: "dob",
xtype: "datefield",
allowBlank: false,
maxValue: new Date()
}]
}],
buttons: [{
text: "载入数据",
handler: function(btn) {
var bf = btn.up("form").getForm();
bf.load({
url: "resources/js/AjaxWithXmlFormLoadData.xml",
waitMsg: "Loading..."
});
}
}, {
text: "提交数据",
disabled: true,
formBind: true, // 跟表单进行绑定;
handler: function(btn) {
btn.up("form").getForm().submit({
url: "resources/js/AjaxWithXmlFormSubmit.xml",
submitEmptyText: false,
waitMsg: "SavingData..."
});
}
}]
});
});
//=>相应文件内容:
// AjaxWithXmlFormLoadData.xml
/*
<?xml version="1.0" encoding="UTF-8"?>
<message success="true">
<contact>
<name>
<first>唐龙</first>
<last>威廉</last>
</name>
<company>ExtJS</company>
<email>tl@lf.com</email>
<state>上海</state>
<dob>04/03/1987</dob>
</contact>
</message>
*/
// AjaxWithXmlFormSubmit.xml
/*
<?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>
*/
* AjaxWithXmlForm示例
* 说明:加载XML数据入Form示例;提交数据后从XML文件返回无效信息;
*/
Ext.require([
"Ext.form.*",
"Ext.data.*"
]);
Ext.onReady(function() {
// example.contact 模型
Ext.define('example.contact', {
extend: "Ext.data.Model",
fields: [
{name: "first", mapping: "name > first"},
{name: "last", mapping: "name > last"},
"company", "email", "state", // 国家-地区;
{name: "dob", type: "date", dateFormat: "m/d/Y"} // 生日;
]
});
// example.fielderror 模型
Ext.define('example.fielderror', {
extend: "Ext.data.Model",
fields: ["id", "msg"]
});
var fpanel = Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title: "XML Form",
frame: true,
width: 350,
waitMsgTarget: true,
fieldDefaults: {
labelAlign: "right",
labelWidth: 75,
msgTarget: "side"
},
// configure how to read the XML data:
reader: Ext.create('Ext.data.reader.Xml', {
model: "example.contact",
record: "contact",
successProperty: "@success"
}),
// configure how to read the XML errors:
errorReader: Ext.create('Ext.data.reader.Xml', {
model: "example.fielderror",
record: "field",
successProperty: "@success"
}),
items: [{
xtype: "fieldset",
title: "ContactInformation",
defaultType: "textfield",
defaults: {
width: 280
},
items: [{
fieldLabel: "First Name",
name: "first",
emptyText: "FirstName"
}, {
fieldLabel: "Last Name",
name: "last",
emptyText: "LastName"
}, {
fieldLabel: "公司名称",
name: "company"
}, {
fieldLabel: "邮箱地址",
name: "email",
vtype: "email"
}, { // 国家-地区
fieldLabel: "区域",
name: "state",
xtype: "combobox",
store: Ext.create('Ext.data.ArrayStore', {
fields: ["code", "name"],
data: [
['001', '北京', '中国首府'],
['002', '上海', '中国经济中心']
]
}),
valueField: "code",
displayField: "name",
typeAhead: true,
queryMode: "local",
emptyText: "Select a state..."
}, {
fieldLabel: "出生日期",
name: "dob",
xtype: "datefield",
allowBlank: false,
maxValue: new Date()
}]
}],
buttons: [{
text: "载入数据",
handler: function(btn) {
var bf = btn.up("form").getForm();
bf.load({
url: "resources/js/AjaxWithXmlFormLoadData.xml",
waitMsg: "Loading..."
});
}
}, {
text: "提交数据",
disabled: true,
formBind: true, // 跟表单进行绑定;
handler: function(btn) {
btn.up("form").getForm().submit({
url: "resources/js/AjaxWithXmlFormSubmit.xml",
submitEmptyText: false,
waitMsg: "SavingData..."
});
}
}]
});
});
//=>相应文件内容:
// AjaxWithXmlFormLoadData.xml
/*
<?xml version="1.0" encoding="UTF-8"?>
<message success="true">
<contact>
<name>
<first>唐龙</first>
<last>威廉</last>
</name>
<company>ExtJS</company>
<email>tl@lf.com</email>
<state>上海</state>
<dob>04/03/1987</dob>
</contact>
</message>
*/
// AjaxWithXmlFormSubmit.xml
/*
<?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>
*/