add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / src / layout / container / Form.js

/**\r
 * This is a layout that will render form Fields, one under the other all stretched to the Container width.\r
 *\r
 *     @example\r
 *     Ext.create('Ext.Panel', {\r
 *         width: 500,\r
 *         height: 300,\r
 *         title: "FormLayout Panel",\r
 *         layout: 'form',\r
 *         renderTo: Ext.getBody(),\r
 *         bodyPadding: 5,\r
 *         defaultType: 'textfield',\r
 *         items: [{\r
 *            fieldLabel: 'First Name',\r
 *             name: 'first',\r
 *             allowBlank:false\r
 *         },{\r
 *             fieldLabel: 'Last Name',\r
 *             name: 'last'\r
 *         },{\r
 *             fieldLabel: 'Company',\r
 *             name: 'company'\r
 *         }, {\r
 *             fieldLabel: 'Email',\r
 *             name: 'email',\r
 *             vtype:'email'\r
 *         }, {\r
 *             fieldLabel: 'DOB',\r
 *             name: 'dob',\r
 *             xtype: 'datefield'\r
 *         }, {\r
 *             fieldLabel: 'Age',\r
 *             name: 'age',\r
 *             xtype: 'numberfield',\r
 *             minValue: 0,\r
 *             maxValue: 100\r
 *         }, {\r
 *             xtype: 'timefield',\r
 *             fieldLabel: 'Time',\r
 *             name: 'time',\r
 *             minValue: '8:00am',\r
 *             maxValue: '6:00pm'\r
 *         }]\r
 *     });\r
 */\r
Ext.define('Ext.layout.container.Form', {\r
    extend: 'Ext.layout.container.Auto',\r
    alternateClassName: 'Ext.layout.FormLayout',\r
    alias: 'layout.form',\r
    type: 'form',\r
\r
    formWrapCls: Ext.baseCSSPrefix + 'form-layout-wrap',\r
    formWrapAutoLabelCls: Ext.baseCSSPrefix + 'form-layout-auto-label',\r
    formWrapSizedLabelCls: Ext.baseCSSPrefix + 'form-layout-sized-label',\r
    formColGroupCls: Ext.baseCSSPrefix + 'form-layout-colgroup',\r
    formColumnCls: Ext.baseCSSPrefix + 'form-layout-column',\r
    formLabelColumnCls: Ext.baseCSSPrefix + 'form-layout-label-column',\r
\r
    /**\r
     * @cfg {Number} itemSpacing\r
     * The amount of space, in pixels, to use between the items. Defaults to the value\r
     * inherited from the theme's stylesheet as configured by\r
     * {@link Ext.form.Labelable#$form-item-margin-bottom $form-item-margin-bottom}.\r
     */\r
\r
    /**\r
     * @cfg {Number/String} labelWidth\r
     * The width of the labels. This can be either a number in pixels, or a valid CSS\r
     * "width" style, e.g. `'100px'`, or `'30%'`.  When configured, all labels will assume\r
     * this width, and any {@link Ext.form.Labelable#labelWidth labelWidth} specified\r
     * on the items will be ignored.\r
     *\r
     * The default behavior of this layout when no no labelWidth is specified is to size\r
     * the labels to the text-width of the label with the longest text.\r
     */\r
\r
    childEls: ['formWrap', 'labelColumn'],\r
\r
    beforeBodyTpl:\r
        '<div id="{ownerId}-formWrap" data-ref="formWrap" class="{formWrapCls}"' +\r
            '<tpl if="itemSpacing"> style="border-spacing:{itemSpacing}px"</tpl>>' +\r
            '<div class="{formColGroupCls}">' +\r
                '<div id="{ownerId}-labelColumn" data-ref="labelColumn" class="{formColumnCls} {formLabelColumnCls}"' +\r
                    '<tpl if="labelWidth"> style="width:{labelWidth}"</tpl>>' +\r
                '</div>' +\r
                '<div class="{formColumnCls}"></div>' +\r
            '</div>',\r
\r
    afterBodyTpl: '</div>',\r
\r
    getRenderData: function() {\r
        var me = this,\r
            labelWidth = me.labelWidth,\r
            formWrapCls = me.formWrapCls,\r
            data = me.callParent();\r
\r
        if (labelWidth) {\r
            if (typeof labelWidth === 'number') {\r
                labelWidth += 'px';\r
            }\r
            data.labelWidth = labelWidth;\r
            formWrapCls += ' ' + me.formWrapSizedLabelCls;\r
        } else {\r
            formWrapCls += ' ' + me.formWrapAutoLabelCls;\r
        }\r
\r
        data.formWrapCls = formWrapCls;\r
        data.formColGroupCls = me.formColGroupCls;\r
        data.formColumnCls = me.formColumnCls;\r
        data.formLabelColumnCls = me.formLabelColumnCls;\r
\r
        return data;\r
    },\r
\r
    getRenderTarget: function() {\r
        return this.formWrap;\r
    }\r
});\r