X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/docs/source/FormLayout.html diff --git a/docs/source/FormLayout.html b/docs/source/FormLayout.html deleted file mode 100644 index 6ba596c8..00000000 --- a/docs/source/FormLayout.html +++ /dev/null @@ -1,371 +0,0 @@ - -
- -/*! - * Ext JS Library 3.3.1 - * Copyright(c) 2006-2010 Sencha Inc. - * licensing@sencha.com - * http://www.sencha.com/license - */ -/** - * @class Ext.layout.FormLayout - * @extends Ext.layout.AnchorLayout - *- - \ No newline at end of fileThis layout manager is specifically designed for rendering and managing child Components of - * {@link Ext.form.FormPanel forms}. It is responsible for rendering the labels of - * {@link Ext.form.Field Field}s.
- * - *This layout manager is used when a Container is configured with the layout:'form' - * {@link Ext.Container#layout layout} config option, and should generally not need to be created directly - * via the new keyword. See {@link Ext.Container#layout} for additional details.
- * - *In an application, it will usually be preferrable to use a {@link Ext.form.FormPanel FormPanel} - * (which is configured with FormLayout as its layout class by default) since it also provides built-in - * functionality for {@link Ext.form.BasicForm#doAction loading, validating and submitting} the form.
- * - *A {@link Ext.Container Container} using the FormLayout layout manager (e.g. - * {@link Ext.form.FormPanel} or specifying layout:'form') can also accept the following - * layout-specific config properties:
- * - *- *
- {@link Ext.form.FormPanel#hideLabels hideLabels}
- *- {@link Ext.form.FormPanel#labelAlign labelAlign}
- *- {@link Ext.form.FormPanel#labelPad labelPad}
- *- {@link Ext.form.FormPanel#labelSeparator labelSeparator}
- *- {@link Ext.form.FormPanel#labelWidth labelWidth}
- *Any Component (including Fields) managed by FormLayout accepts the following as a config option: - *
- * - *- *
- {@link Ext.Component#anchor anchor}
- *Any Component managed by FormLayout may be rendered as a form field (with an associated label) by - * configuring it with a non-null {@link Ext.Component#fieldLabel fieldLabel}. Components configured - * in this way may be configured with the following options which affect the way the FormLayout renders them: - *
- * - *- *
- {@link Ext.Component#clearCls clearCls}
- *- {@link Ext.Component#fieldLabel fieldLabel}
- *- {@link Ext.Component#hideLabel hideLabel}
- *- {@link Ext.Component#itemCls itemCls}
- *- {@link Ext.Component#labelSeparator labelSeparator}
- *- {@link Ext.Component#labelStyle labelStyle}
- *Example usage:
- *- */ -Ext.layout.FormLayout = Ext.extend(Ext.layout.AnchorLayout, { - - /** - * @cfg {String} labelSeparator - * See {@link Ext.form.FormPanel}.{@link Ext.form.FormPanel#labelSeparator labelSeparator}. Configuration - * of this property at the container level takes precedence. - */ - labelSeparator : ':', - - /** - * Read only. The CSS style specification string added to field labels in this layout if not - * otherwise {@link Ext.Component#labelStyle specified by each contained field}. - * @type String - * @property labelStyle - */ - - /** - * @cfg {Boolean} trackLabels - * True to show/hide the field label when the field is hidden. Defaults to true. - */ - trackLabels: true, - - type: 'form', - - onRemove: function(c){ - Ext.layout.FormLayout.superclass.onRemove.call(this, c); - if(this.trackLabels){ - c.un('show', this.onFieldShow, this); - c.un('hide', this.onFieldHide, this); - } - // check for itemCt, since we may be removing a fieldset or something similar - var el = c.getPositionEl(), - ct = c.getItemCt && c.getItemCt(); - if (c.rendered && ct) { - if (el && el.dom) { - el.insertAfter(ct); - } - Ext.destroy(ct); - Ext.destroyMembers(c, 'label', 'itemCt'); - if (c.customItemCt) { - Ext.destroyMembers(c, 'getItemCt', 'customItemCt'); - } - } - }, - - // private - setContainer : function(ct){ - Ext.layout.FormLayout.superclass.setContainer.call(this, ct); - if(ct.labelAlign){ - ct.addClass('x-form-label-'+ct.labelAlign); - } - - if(ct.hideLabels){ - Ext.apply(this, { - labelStyle: 'display:none', - elementStyle: 'padding-left:0;', - labelAdjust: 0 - }); - }else{ - this.labelSeparator = Ext.isDefined(ct.labelSeparator) ? ct.labelSeparator : this.labelSeparator; - ct.labelWidth = ct.labelWidth || 100; - if(Ext.isNumber(ct.labelWidth)){ - var pad = Ext.isNumber(ct.labelPad) ? ct.labelPad : 5; - Ext.apply(this, { - labelAdjust: ct.labelWidth + pad, - labelStyle: 'width:' + ct.labelWidth + 'px;', - elementStyle: 'padding-left:' + (ct.labelWidth + pad) + 'px' - }); - } - if(ct.labelAlign == 'top'){ - Ext.apply(this, { - labelStyle: 'width:auto;', - labelAdjust: 0, - elementStyle: 'padding-left:0;' - }); - } - } - }, - - // private - isHide: function(c){ - return c.hideLabel || this.container.hideLabels; - }, - - onFieldShow: function(c){ - c.getItemCt().removeClass('x-hide-' + c.hideMode); - - // Composite fields will need to layout after the container is made visible - if (c.isComposite) { - c.doLayout(); - } - }, - - onFieldHide: function(c){ - c.getItemCt().addClass('x-hide-' + c.hideMode); - }, - - //private - getLabelStyle: function(s){ - var ls = '', items = [this.labelStyle, s]; - for (var i = 0, len = items.length; i < len; ++i){ - if (items[i]){ - ls += items[i]; - if (ls.substr(-1, 1) != ';'){ - ls += ';'; - } - } - } - return ls; - }, - - /** - * @cfg {Ext.Template} fieldTpl - * A {@link Ext.Template#compile compile}d {@link Ext.Template} for rendering - * the fully wrapped, labeled and styled form Field. Defaults to:-// Required if showing validation messages -Ext.QuickTips.init(); - -// While you can create a basic Panel with layout:'form', practically -// you should usually use a FormPanel to also get its form functionality -// since it already creates a FormLayout internally. -var form = new Ext.form.FormPanel({ - title: 'Form Layout', - bodyStyle: 'padding:15px', - width: 350, - defaultType: 'textfield', - defaults: { - // applied to each contained item - width: 230, - msgTarget: 'side' - }, - items: [{ - fieldLabel: 'First Name', - name: 'first', - allowBlank: false, - {@link Ext.Component#labelSeparator labelSeparator}: ':' // override labelSeparator layout config - },{ - fieldLabel: 'Last Name', - name: 'last' - },{ - fieldLabel: 'Email', - name: 'email', - vtype:'email' - }, { - xtype: 'textarea', - hideLabel: true, // override hideLabels layout config - name: 'msg', - anchor: '100% -53' - } - ], - buttons: [ - {text: 'Save'}, - {text: 'Cancel'} - ], - layoutConfig: { - {@link #labelSeparator}: '~' // superseded by assignment below - }, - // config options applicable to container when layout='form': - hideLabels: false, - labelAlign: 'left', // or 'right' or 'top' - {@link Ext.form.FormPanel#labelSeparator labelSeparator}: '>>', // takes precedence over layoutConfig value - labelWidth: 65, // defaults to 100 - labelPad: 8 // defaults to 5, must specify labelWidth to be honored -}); -
- *-new Ext.Template( - '<div class="x-form-item {itemCls}" tabIndex="-1">', - '<label for="{id}" style="{labelStyle}" class="x-form-item-label">{label}{labelSeparator}</label>', - '<div class="x-form-element" id="x-form-el-{id}" style="{elementStyle}">', - '</div><div class="{clearCls}"></div>', - '</div>' -); -
This may be specified to produce a different DOM structure when rendering form Fields.
- *A description of the properties within the template follows:
- *- *
- itemCls : String
- *The CSS class applied to the outermost div wrapper - * that contains this field label and field element (the default class is 'x-form-item' and itemCls - * will be added to that). If supplied, itemCls at the field level will override the default itemCls - * supplied at the container level.- id : String
- *The id of the Field- {@link #labelStyle} : String
- *- * A CSS style specification string to add to the field label for this field (defaults to '' or the - * {@link #labelStyle layout's value for labelStyle}).- label : String
- *The text to display as the label for this - * field (defaults to '')- {@link #labelSeparator} : String
- *The separator to display after - * the text of the label for this field (defaults to a colon ':' or the - * {@link #labelSeparator layout's value for labelSeparator}). To hide the separator use empty string ''.- elementStyle : String
- *The styles text for the input element's wrapper.- clearCls : String
- *The CSS class to apply to the special clearing div - * rendered directly after each form field wrapper (defaults to 'x-form-clear-left')Also see {@link #getTemplateArgs}
- */ - - /** - * @private - * - */ - renderItem : function(c, position, target){ - if(c && (c.isFormField || c.fieldLabel) && c.inputType != 'hidden'){ - var args = this.getTemplateArgs(c); - if(Ext.isNumber(position)){ - position = target.dom.childNodes[position] || null; - } - if(position){ - c.itemCt = this.fieldTpl.insertBefore(position, args, true); - }else{ - c.itemCt = this.fieldTpl.append(target, args, true); - } - if(!c.getItemCt){ - // Non form fields don't have getItemCt, apply it here - // This will get cleaned up in onRemove - Ext.apply(c, { - getItemCt: function(){ - return c.itemCt; - }, - customItemCt: true - }); - } - c.label = c.getItemCt().child('label.x-form-item-label'); - if(!c.rendered){ - c.render('x-form-el-' + c.id); - }else if(!this.isValidParent(c, target)){ - Ext.fly('x-form-el-' + c.id).appendChild(c.getPositionEl()); - } - if(this.trackLabels){ - if(c.hidden){ - this.onFieldHide(c); - } - c.on({ - scope: this, - show: this.onFieldShow, - hide: this.onFieldHide - }); - } - this.configureItem(c); - }else { - Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments); - } - }, - - /** - *Provides template arguments for rendering the fully wrapped, labeled and styled form Field.
- *This method returns an object hash containing properties used by the layout's {@link #fieldTpl} - * to create a correctly wrapped, labeled and styled form Field. This may be overriden to - * create custom layouts. The properties which must be returned are:
- * @param (Ext.form.Field} field The {@link Ext.form.Field Field} being rendered. - * @return {Object} An object hash containing the properties required to render the Field. - */ - getTemplateArgs: function(field) { - var noLabelSep = !field.fieldLabel || field.hideLabel; - - return { - id : field.id, - label : field.fieldLabel, - itemCls : (field.itemCls || this.container.itemCls || '') + (field.hideLabel ? ' x-hide-label' : ''), - clearCls : field.clearCls || 'x-form-clear-left', - labelStyle : this.getLabelStyle(field.labelStyle), - elementStyle : this.elementStyle || '', - labelSeparator: noLabelSep ? '' : (Ext.isDefined(field.labelSeparator) ? field.labelSeparator : this.labelSeparator) - }; - }, - - // private - adjustWidthAnchor: function(value, c){ - if(c.label && !this.isHide(c) && (this.container.labelAlign != 'top')){ - var adjust = Ext.isIE6 || (Ext.isIE && !Ext.isStrict); - return value - this.labelAdjust + (adjust ? -3 : 0); - } - return value; - }, - - adjustHeightAnchor : function(value, c){ - if(c.label && !this.isHide(c) && (this.container.labelAlign == 'top')){ - return value - c.label.getHeight(); - } - return value; - }, - - // private - isValidParent : function(c, target){ - return target && this.container.getEl().contains(c.getPositionEl()); - } - - /** - * @property activeItem - * @hide - */ -}); - -Ext.Container.LAYOUTS['form'] = Ext.layout.FormLayout; -- *
- itemCls : String
- *The CSS class applied to the outermost div wrapper - * that contains this field label and field element (the default class is 'x-form-item' and itemCls - * will be added to that). If supplied, itemCls at the field level will override the default itemCls - * supplied at the container level.- id : String
- *The id of the Field- {@link #labelStyle} : String
- *- * A CSS style specification string to add to the field label for this field (defaults to '' or the - * {@link #labelStyle layout's value for labelStyle}).- label : String
- *The text to display as the label for this - * field (defaults to the field's configured fieldLabel property)- {@link #labelSeparator} : String
- *The separator to display after - * the text of the label for this field (defaults to a colon ':' or the - * {@link #labelSeparator layout's value for labelSeparator}). To hide the separator use empty string ''.- elementStyle : String
- *The styles text for the input element's wrapper.- clearCls : String
- *The CSS class to apply to the special clearing div - * rendered directly after each form field wrapper (defaults to 'x-form-clear-left')