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'    : '[e-mail]',            '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();    }});