ExtJs4_AjaxWithXmlForm示例;

/**
 * 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>
*/
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值