Ext.js5（表单）的容器(表单load测试数据)（表单填写的数据的保存）（vtype）(combineErrors)（插入（））(文本框的布局)(36)

view

/**
 * The FieldContainer\'s child items are arranged like in any other container, using the
 * layout configuration property. In this example, each FieldContainer is set to use an
 * HBox layout.
 *在文本容器里布局和其他容器里布局一样的，都是使用布局属性配置。在这个例子中，没有文本同期都是用HBOX布局。
 * FieldContainers can be configured with the combineErrors option, which combines errors
 * from the sub fields and presents them at the container level. In this example the
 * Availability, Phone and Full Name items have this option enabled, and the Time worked
 * item does not.
 * 文本容器还可以配置一个联合错误的选项。具体怎么用的，看例子。本例子中Availability, Phone and Full Name 设置了这个选项，Time没有。
 */
Ext.define('KitchenSink.view.form.FieldContainer', {
    extend: 'Ext.form.Panel',
    xtype: 'form-fieldcontainer',
    controller: 'form-fieldcontainer',


    title: 'Employee Information',
    width: 600,
    bodyPadding: 10,
    defaults: {
        anchor: '100%',
        labelWidth: 100
    },
    items: [{
        xtype: 'textfield',
        name: 'email',
        fieldLabel: 'Email Address',
        vtype: 'email',//文本输入格式的验证
        msgTarget: 'side',
        allowBlank: false
    }, {
        xtype: 'fieldcontainer',
        fieldLabel: 'Availability',
        //如果设置为 true, 则 field 容器自动将其包含的所有属性域的校验错误组合为单个错误信息, 并显示到 配置的 msgTarget 上. 默认值 false.
        combineErrors: true,
        msgTarget : 'side',
        layout: 'hbox',
        defaults: {
            flex: 1,
            hideLabel: true
        },
        items: [{
            xtype: 'datefield',
            name: 'startDate',
            fieldLabel: 'Start',
            margin: '0 5 0 0',
            allowBlank: false
        }, {
            xtype     : 'datefield',
            name      : 'endDate',
            fieldLabel: 'End',
            allowBlank: false
        }]
    }, {
        xtype: 'fieldset',//html中的legend
        title: 'Details',
        collapsible: true,//这个可折叠，真的太人性化了
        defaults: {
            labelWidth: 90,
            anchor: '100%',
            layout: 'hbox'
        },
        items: [{
            xtype: 'fieldcontainer',
            fieldLabel: 'Phone',
            combineErrors: true,
            msgTarget: 'under',
            defaults: {
                hideLabel: true,
                //True时潜在的输入表单项中设置最大长度属性。在默认为false
                enforceMaxLength: true,

                maskRe: /[0-9.]/
            },
            items: [
            //太神奇了，插入（）样式竟然是这样写的
                {xtype: 'displayfield', value: '(', margin: '0 2 0 0'},
                {xtype: 'textfield',    fieldLabel: 'Phone 1', name: 'phone-1', width: 45, allowBlank: false, maxLength: 3},
                {xtype: 'displayfield', value: ')', margin: '0 5 0 2'},
                {xtype: 'textfield',    fieldLabel: 'Phone 2', name: 'phone-2', width: 45, allowBlank: false, margin: '0 5 0 0', maxLength: 3},
                {xtype: 'displayfield', value: '-'},
                {xtype: 'textfield',    fieldLabel: 'Phone 3', name: 'phone-3', width: 60, allowBlank: false, margin: '0 0 0 5', maxLength: 4}
            ]
        }, {
            xtype: 'fieldcontainer',
            fieldLabel: 'Time worked',
            combineErrors: false,
            defaults: {
                hideLabel: true,
                margin: '0 5 0 0'
            },
            items: [{
               name : 'hours',
               xtype: 'numberfield',
               minValue: 0,
               width: 95,
               allowBlank: false
           }, {
               xtype: 'displayfield',
               value: 'hours'
           }, {
               name : 'minutes',
               xtype: 'numberfield',
               minValue: 0,
               width: 95,
               allowBlank: false
           }, {
               xtype: 'displayfield',
               value: 'mins'
            }]
        }, {
            xtype : 'fieldcontainer',
            combineErrors: true,
            msgTarget: 'side',
            fieldLabel: 'Full Name',
            defaults: {
                hideLabel: true,
                margin: '0 5 0 0'
            },
            items: [{
                //the width of this field in the HBox layout is set directly
                //the other 2 items are given flex: 1, so will share the rest of the space
                width: 75,
                xtype: 'combo',
                queryMode: 'local',
                value: 'mrs',
                //triggerAction触发器被点击时执行的操作。
                //'all' 指定allQuery配置项执行查询
                //'query' 使用原始值执行查询
                triggerAction: 'all',
                //forceSelection true时，所选择的值限制在一个列表中的值，false时，允许用户设置任意的文本字段
                forceSelection: true,
                //设置为false阻止直接在表单项的文本框中输入字符；这时表单项只能通过从选择器(picker)中来选择值。 在这种模式下，也可以通过直接点击输入框本身来使选择器(picker)弹出。
                editable: false,
                fieldLabel: 'Title',
                name: 'title',
                displayField: 'name',
                valueField: 'value',
                store: {
                    fields: ['name', 'value'],
                    data: [
                        {name : 'Mr',   value: 'mr'},
                        {name : 'Mrs',  value: 'mrs'},
                        {name : 'Miss', value: 'miss'}
                    ]
                }
            }, {
                xtype: 'textfield',
                flex : 1,
                name : 'firstName',
                fieldLabel: 'First',
                allowBlank: false
            }, {
                xtype: 'textfield',
                flex : 1,
                name : 'lastName',
                fieldLabel: 'Last',
                allowBlank: false
            }]
        }]
    }],

    buttons: [{
        text   : 'Load test data',
        handler: 'onLoadClick'
    }, {
        text   : 'Save',
        handler: 'onSaveClick'
    }, {
        text   : 'Reset',
        handler: 'onResetClick'
    }]
});

model

Ext.define('KitchenSink.model.PartTimeEmployee', {
    extend: 'KitchenSink.model.Base',
    fields: [
        {name: 'email',     type: 'string'},
        {name: 'title',     type: 'string'},
        {name: 'firstName', type: 'string'},
        {name: 'lastName',  type: 'string'},
        {name: 'phone-1',   type: 'string'},
        {name: 'phone-2',   type: 'string'},
        {name: 'phone-3',   type: 'string'},
        {name: 'hours',     type: 'number'},
        {name: 'minutes',   type: 'number'},
        {name: 'startDate', type: 'date'},
        {name: 'endDate',   type: 'date'}
    ]
});

viewcontroller

Ext.define('KitchenSink.view.form.FieldContainerController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.form-fieldcontainer',

    requires: [
        'KitchenSink.model.PartTimeEmployee'
    ],

    onLoadClick: function() {
        this.getView().loadRecord(Ext.create('KitchenSink.model.PartTimeEmployee', {
            'email'    : 'abe@sencha.com',
            'title'    : 'mr',
            'firstName': 'Abraham',
            'lastName' : 'Elias',
            'startDate': '01/10/2003',
            'endDate'  : '12/11/2009',
            'phone-1'  : '555',
            'phone-2'  : '123',
            'phone-3'  : '4567',
            'hours'    : 7,
            'minutes'  : 15
        }));
    },
//弹出了包含所填字段的信息框（应该confirm好过alert，私以为）
    onSaveClick: function() {
        var form   = this.getView(),
            encode = Ext.String.htmlEncode,
            s      = '';

        if (form.isValid()) {
            Ext.iterate(form.getValues(), function(key, value) {
                value = encode(value);

                s += Ext.util.Format.format("{0} = {1}<br />", key, value);
            }, this);

            Ext.Msg.alert('Form Values', s);
        }
    },

    onResetClick: function() {
        this.getView().reset();
    }
});