/** * Form layout renders a single column of form fields, all with the same * {@link #labelWidth label width}. The default behavior is to size all labels to the * width of the label with the longest text, but the width of the labels can also be * configured. * * The following example uses label-auto-widthing to size all labels to the width of the * largest label. * * ```javascript * @example({ framework: 'extjs' }) * Ext.create('Ext.form.Panel', { * fullscreen: true, * layout: 'form', * items: [ * { * xtype: 'textfield', * label: 'First Name' * }, * { * xtype: 'textfield', * label: 'Last Name' * }, * { * xtype: 'textfield', * label: 'Bank Account Number' * }, * { * xtype: 'checkboxfield', * label: 'Approved' * } * ] * }); * ``` * ```javascript * @example({framework: 'ext-react', packages:['ext-react']}) * import React, { Component } from 'react'; * import { ExtButton, ExtFormPanel, ExtTextField } from '@sencha/ext-react'; * * export default class myExample extends Component { * render() { * return ( * <ExtFormPanel title="Form Panel"> * <ExtTextField label="First Name"/> * <ExtTextField label="Last Name"/> * <ExtTextField label="Account Number"/> * <ExtButton text="Submit" /> * </ExtFormPanel> * ) * } * } * ``` * ```javascript * @example({framework: 'ext-angular', packages:['ext-angular']}) * import { Component } from '@angular/core' * declare var Ext: any; * * @Component({ * selector: 'app-root-1', * styles: [``], * template: ` * <ExtFormPanel title="Form Panel"> * <ExtTextField [label]='"First Name"'></ExtTextField> * <ExtTextField [label]='"Last Name"'></ExtTextField> * <ExtTextField [label]='"Account Number"'></ExtTextField> * <ExtButton [text]="Submit"></ExtButton> * </ExtFormPanel> * ` * }) * export class AppComponent {} * ``` * ```html * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 1 }) * <ext-formpanel title="Form Panel"> * <ext-textfield label="First Name"></ext-textfield> * <ext-textfield label="Last Name"></ext-textfield> * <ext-textfield label="Account Number"></ext-textfield> * <ext-button text="Submit"></ext-button> * </ext-formpanel> * ``` * ```javascript * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 2 }) * import '@sencha/ext-web-components/dist/ext-button.component'; * import '@sencha/ext-web-components/dist/ext-formpanel.component'; * import '@sencha/ext-web-components/dist/ext-textfield.component'; * * export default class FormComponent {} * ``` * * **Note** This layout can only accept form fields as children and these fields * cannot use `top` {@link Ext.field.Text#labelAlign}. */Ext.define('Ext.layout.Form', { extend: 'Ext.layout.Auto', alias: 'layout.form', isFormLayout: true, cls: Ext.baseCSSPrefix + 'layout-form', itemCls: Ext.baseCSSPrefix + 'layout-form-item', config: { /** * @cfg {Number} itemSpacing * The amount of space, in pixels, around each form field. Defaults to the value * inherited from the theme's stylesheet as configured by * {@link Ext.layout.Form#$layout-form-item-spacing $layout-form-item-spacing}. */ itemSpacing: null, /** * @cfg {Number/String} [labelWidth='auto'] * The width of the labels. This can be either a number in pixels, or a valid CSS * "width" style, e.g. `'100px'`, or `'30%'`. When configured, all labels will assume * this width, and any {@link Ext.form.Labelable#labelWidth labelWidth} specified * on the items will be ignored. * * The default behavior of this layout when no no labelWidth is specified is to size * the labels to the text-width of the label with the longest text. */ labelWidth: null }, hasLabelWidthCls: Ext.baseCSSPrefix + 'has-label-width', //<debug> onItemAdd: function(item, index) { if (item.isInner && !item.isFormField) { Ext.raise( "Cannot add item to container. " + "Only Ext.field.Field instances are allowed as inner items in a form layout." ); } this.callParent([item, index]); }, //</debug> updateContainer: function(container, oldContainer) { var colGroup; colGroup = this.columnGroupElement = container.getRenderTarget().appendChild({ cls: Ext.baseCSSPrefix + 'colgroup-el', cn: [{ cls: Ext.baseCSSPrefix + 'label-column-el' }, { cls: Ext.baseCSSPrefix + 'body-column-el' }] }); this.labelColumnElement = colGroup.first(); this.callParent([container, oldContainer]); }, updateItemSpacing: function(itemSpacing) { var renderTarget = this.getContainer().getRenderTarget(); renderTarget.setStyle('border-spacing', Ext.Element.addUnits(itemSpacing)); }, updateLabelWidth: function(labelWidth) { this.labelColumnElement.setWidth(labelWidth); this.getContainer().getRenderTarget().toggleCls( this.hasLabelWidthCls, labelWidth != null && labelWidth !== 'auto' ); }});