add extjs 6.0.1 sources

[extjs.git] / extjs / examples / kitchensink / classic / samples / view / form / FieldContainer.js

/**\r
 * The FieldContainer\'s child items are arranged like in any other container, using the\r
 * layout configuration property. In this example, each FieldContainer is set to use an\r
 * HBox layout.\r
 *\r
 * FieldContainers can be configured with the combineErrors option, which combines errors\r
 * from the sub fields and presents them at the container level. In this example the\r
 * Availability, Phone and Full Name items have this option enabled, and the Time worked\r
 * item does not.\r
 */\r
Ext.define('KitchenSink.view.form.FieldContainer', {\r
    extend: 'Ext.form.Panel',\r
    xtype: 'form-fieldcontainer',\r
    controller: 'form-fieldcontainer',\r
\r
    //<example>\r
    requires: [\r
        'KitchenSink.model.PartTimeEmployee',\r
        'KitchenSink.view.form.FieldContainerController'\r
    ],\r
\r
    exampleTitle: 'Field Container',\r
    otherContent: [{\r
        type: 'Model',\r
        path: 'classic/samples/model/PartTimeEmployee.js'\r
    }, {\r
        type: 'ViewController',\r
        path: 'classic/samples/view/form/FieldContainerController.js'\r
    }],\r
    //</example>\r
\r
    title: 'Employee Information',\r
    width: 600,\r
    bodyPadding: 10,\r
    defaults: {\r
        anchor: '100%',\r
        labelWidth: 100\r
    },\r
    items: [{\r
        xtype: 'textfield',\r
        name: 'email',\r
        fieldLabel: 'Email Address',\r
        vtype: 'email',\r
        msgTarget: 'side',\r
        allowBlank: false\r
    }, {\r
        xtype: 'fieldcontainer',\r
        fieldLabel: 'Availability',\r
        combineErrors: true,\r
        msgTarget : 'side',\r
        layout: 'hbox',\r
        defaults: {\r
            flex: 1,\r
            hideLabel: true\r
        },\r
        items: [{\r
            xtype: 'datefield',\r
            name: 'startDate',\r
            fieldLabel: 'Start',\r
            margin: '0 5 0 0',\r
            allowBlank: false\r
        }, {\r
            xtype     : 'datefield',\r
            name      : 'endDate',\r
            fieldLabel: 'End',\r
            allowBlank: false\r
        }]\r
    }, {\r
        xtype: 'fieldset',\r
        title: 'Details',\r
        collapsible: true,\r
        defaults: {\r
            labelWidth: 90,\r
            anchor: '100%',\r
            layout: 'hbox'\r
        },\r
        items: [{\r
            xtype: 'fieldcontainer',\r
            fieldLabel: 'Phone',\r
            combineErrors: true,\r
            msgTarget: 'under',\r
            defaults: {\r
                hideLabel: true,\r
                enforceMaxLength: true,\r
                maskRe: /[0-9.]/\r
            },\r
            items: [\r
                {xtype: 'displayfield', value: '(', margin: '0 2 0 0'},\r
                {xtype: 'textfield',    fieldLabel: 'Phone 1', name: 'phone-1', width: 45, allowBlank: false, maxLength: 3},\r
                {xtype: 'displayfield', value: ')', margin: '0 5 0 2'},\r
                {xtype: 'textfield',    fieldLabel: 'Phone 2', name: 'phone-2', width: 45, allowBlank: false, margin: '0 5 0 0', maxLength: 3},\r
                {xtype: 'displayfield', value: '-'},\r
                {xtype: 'textfield',    fieldLabel: 'Phone 3', name: 'phone-3', width: 60, allowBlank: false, margin: '0 0 0 5', maxLength: 4}\r
            ]\r
        }, {\r
            xtype: 'fieldcontainer',\r
            fieldLabel: 'Time worked',\r
            combineErrors: false,\r
            defaults: {\r
                hideLabel: true,\r
                margin: '0 5 0 0'\r
            },\r
            items: [{\r
               name : 'hours',\r
               xtype: 'numberfield',\r
               minValue: 0,\r
               width: 95,\r
               allowBlank: false\r
           }, {\r
               xtype: 'displayfield',\r
               value: 'hours'\r
           }, {\r
               name : 'minutes',\r
               xtype: 'numberfield',\r
               minValue: 0,\r
               width: 95,\r
               allowBlank: false\r
           }, {\r
               xtype: 'displayfield',\r
               value: 'mins'\r
            }]\r
        }, {\r
            xtype : 'fieldcontainer',\r
            combineErrors: true,\r
            msgTarget: 'side',\r
            fieldLabel: 'Full Name',\r
            defaults: {\r
                hideLabel: true,\r
                margin: '0 5 0 0'\r
            },\r
            items: [{\r
                //the width of this field in the HBox layout is set directly\r
                //the other 2 items are given flex: 1, so will share the rest of the space\r
                width: 75,\r
                xtype: 'combo',\r
                queryMode: 'local',\r
                value: 'mrs',\r
                triggerAction: 'all',\r
                forceSelection: true,\r
                editable: false,\r
                fieldLabel: 'Title',\r
                name: 'title',\r
                displayField: 'name',\r
                valueField: 'value',\r
                store: {\r
                    fields: ['name', 'value'],\r
                    data: [\r
                        {name : 'Mr',   value: 'mr'},\r
                        {name : 'Mrs',  value: 'mrs'},\r
                        {name : 'Miss', value: 'miss'}\r
                    ]\r
                }\r
            }, {\r
                xtype: 'textfield',\r
                flex : 1,\r
                name : 'firstName',\r
                fieldLabel: 'First',\r
                allowBlank: false\r
            }, {\r
                xtype: 'textfield',\r
                flex : 1,\r
                name : 'lastName',\r
                fieldLabel: 'Last',\r
                allowBlank: false\r
            }]\r
        }]\r
    }],\r
    \r
    buttons: [{\r
        text   : 'Load test data',\r
        handler: 'onLoadClick'\r
    }, {\r
        text   : 'Save',\r
        handler: 'onSaveClick'\r
    }, {\r
        text   : 'Reset',\r
        handler: 'onResetClick'\r
    }]\r
});