X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..6b044c28b5f26fb99c86c237ffad19741c0f7f3d:/src/widgets/layout/FormLayout.js diff --git a/src/widgets/layout/FormLayout.js b/src/widgets/layout/FormLayout.js index ef3051f2..15289581 100644 --- a/src/widgets/layout/FormLayout.js +++ b/src/widgets/layout/FormLayout.js @@ -1,8 +1,8 @@ /*! - * Ext JS Library 3.0.0 - * Copyright(c) 2006-2009 Ext JS, LLC - * licensing@extjs.com - * http://www.extjs.com/license + * Ext JS Library 3.3.1 + * Copyright(c) 2006-2010 Sencha Inc. + * licensing@sencha.com + * http://www.sencha.com/license */ /** * @class Ext.layout.FormLayout @@ -115,6 +115,35 @@ Ext.layout.FormLayout = Ext.extend(Ext.layout.AnchorLayout, { * @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); @@ -123,26 +152,50 @@ Ext.layout.FormLayout = Ext.extend(Ext.layout.AnchorLayout, { } if(ct.hideLabels){ - this.labelStyle = "display:none"; - this.elementStyle = "padding-left:0;"; - this.labelAdjust = 0; + Ext.apply(this, { + labelStyle: 'display:none', + elementStyle: 'padding-left:0;', + labelAdjust: 0 + }); }else{ - this.labelSeparator = ct.labelSeparator || this.labelSeparator; + this.labelSeparator = Ext.isDefined(ct.labelSeparator) ? ct.labelSeparator : this.labelSeparator; ct.labelWidth = ct.labelWidth || 100; - if(typeof ct.labelWidth == 'number'){ - var pad = (typeof ct.labelPad == 'number' ? ct.labelPad : 5); - this.labelAdjust = ct.labelWidth+pad; - this.labelStyle = "width:"+ct.labelWidth+"px;"; - this.elementStyle = "padding-left:"+(ct.labelWidth+pad)+'px'; + 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'){ - this.labelStyle = "width:auto;"; - this.labelAdjust = 0; - this.elementStyle = "padding-left:0;"; + 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]; @@ -150,7 +203,7 @@ Ext.layout.FormLayout = Ext.extend(Ext.layout.AnchorLayout, { if (items[i]){ ls += items[i]; if (ls.substr(-1, 1) != ';'){ - ls += ';' + ls += ';'; } } } @@ -191,19 +244,48 @@ new Ext.Template( *

Also see {@link #getTemplateArgs}

*/ - // private + /** + * @private + * + */ renderItem : function(c, position, target){ - if(c && !c.rendered && (c.isFormField || c.fieldLabel) && c.inputType != 'hidden'){ + if(c && (c.isFormField || c.fieldLabel) && c.inputType != 'hidden'){ var args = this.getTemplateArgs(c); - if(typeof position == 'number'){ + if(Ext.isNumber(position)){ position = target.dom.childNodes[position] || null; } if(position){ - this.fieldTpl.insertBefore(position, args); + c.itemCt = this.fieldTpl.insertBefore(position, args, true); }else{ - this.fieldTpl.append(target, args); + 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()); } - c.render('x-form-el-'+c.id); + 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); } @@ -223,7 +305,7 @@ new Ext.Template( * 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 '')
    • + * 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 ''.
    • @@ -231,30 +313,42 @@ new Ext.Template( *
  • 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')
    • * - * @param field The {@link Field Ext.form.Field} being rendered. - * @return An object hash containing the properties required to render the Field. + * @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, - labelStyle: field.labelStyle||this.labelStyle||'', - elementStyle: this.elementStyle||'', - labelSeparator: noLabelSep ? '' : (typeof field.labelSeparator == 'undefined' ? this.labelSeparator : field.labelSeparator), - itemCls: (field.itemCls||this.container.itemCls||'') + (field.hideLabel ? ' x-hide-label' : ''), - clearCls: field.clearCls || 'x-form-clear-left' + 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, comp){ - return value - (comp.isFormField || comp.fieldLabel ? (comp.hideLabel ? 0 : this.labelAdjust) : 0); + 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 true; + return target && this.container.getEl().contains(c.getPositionEl()); } /** @@ -263,4 +357,4 @@ new Ext.Template( */ }); -Ext.Container.LAYOUTS['form'] = Ext.layout.FormLayout; \ No newline at end of file +Ext.Container.LAYOUTS['form'] = Ext.layout.FormLayout;