Upgrade to ExtJS 3.3.1 - Released 11/30/2010

[extjs.git] / src / widgets / layout / FormLayout.js

diff --git a/src/widgets/layout/FormLayout.js b/src/widgets/layout/FormLayout.js
index ef3051f..1528958 100644 (file)
--- 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
  */
 /**
  * @class Ext.layout.FormLayout


@@ -115,6 +115,35 @@ Ext.layout.FormLayout = Ext.extend(Ext.layout.AnchorLayout, {
      * @property labelStyle
      */
 
      * @property labelStyle
      */
 

+    /**
+     * @cfg {Boolean} trackLabels
+     * True to show/hide the field label when the field is hidden. Defaults to <tt>true</tt>.
+     */
+    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);
     // 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){
         }
 
         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{
         }else{

-            this.labelSeparator = ct.labelSeparator || this.labelSeparator;
+            this.labelSeparator = Ext.isDefined(ct.labelSeparator) ? ct.labelSeparator : this.labelSeparator;

             ct.labelWidth = ct.labelWidth || 100;
             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'){
             }
             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];
     //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) != ';'){
             if (items[i]){
                 ls += items[i];
                 if (ls.substr(-1, 1) != ';'){

-                    ls += ';'
+                    ls += ';';

                 }
             }
         }
                 }
             }
         }


@@ -191,19 +244,48 @@ new Ext.Template(
      * <p>Also see <tt>{@link #getTemplateArgs}</tt></p>
      */
 
      * <p>Also see <tt>{@link #getTemplateArgs}</tt></p>
      */
 

-    // private
+    /**
+     * @private
+     *
+     */

     renderItem : function(c, position, target){
     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);
             var args = this.getTemplateArgs(c);

-            if(typeof position == 'number'){
+            if(Ext.isNumber(position)){

                 position = target.dom.childNodes[position] || null;
             }
             if(position){
                 position = target.dom.childNodes[position] || null;
             }
             if(position){

-                this.fieldTpl.insertBefore(position, args);
+                c.itemCt = this.fieldTpl.insertBefore(position, args, true);

             }else{
             }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);
         }
         }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 <tt>''</tt> or the
      * {@link #labelStyle layout's value for <tt>labelStyle</tt>}).</div></li>
      * <li><b><tt>label</tt></b> : String<div class="sub-desc">The text to display as the label for this
      * A CSS style specification string to add to the field label for this field (defaults to <tt>''</tt> or the
      * {@link #labelStyle layout's value for <tt>labelStyle</tt>}).</div></li>
      * <li><b><tt>label</tt></b> : String<div class="sub-desc">The text to display as the label for this

-     * field (defaults to <tt>''</tt>)</div></li>
+     * field (defaults to the field's configured fieldLabel property)</div></li>

      * <li><b><tt>{@link #labelSeparator}</tt></b> : String<div class="sub-desc">The separator to display after
      * the text of the label for this field (defaults to a colon <tt>':'</tt> or the
      * {@link #labelSeparator layout's value for labelSeparator}). To hide the separator use empty string ''.</div></li>
      * <li><b><tt>{@link #labelSeparator}</tt></b> : String<div class="sub-desc">The separator to display after
      * the text of the label for this field (defaults to a colon <tt>':'</tt> or the
      * {@link #labelSeparator layout's value for labelSeparator}). To hide the separator use empty string ''.</div></li>


@@ -231,30 +313,42 @@ new Ext.Template(
      * <li><b><tt>clearCls</tt></b> : String<div class="sub-desc">The CSS class to apply to the special clearing div
      * rendered directly after each form field wrapper (defaults to <tt>'x-form-clear-left'</tt>)</div></li>
      * </ul></div>
      * <li><b><tt>clearCls</tt></b> : String<div class="sub-desc">The CSS class to apply to the special clearing div
      * rendered directly after each form field wrapper (defaults to <tt>'x-form-clear-left'</tt>)</div></li>
      * </ul></div>

-     * @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;
      */
     getTemplateArgs: function(field) {
         var noLabelSep = !field.fieldLabel || field.hideLabel;

+

         return {
         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
         };
     },
 
     // 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){
     },
 
     // 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;