Ext.js5表单—有真实的load,submit行为的表单（reader在json.xml中record的区别）（49）

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>