Upgrade to ExtJS 3.1.0 - Released 12/16/2009

[extjs.git] / examples / ux / FieldLabeler.js

diff --git a/examples/ux/FieldLabeler.js b/examples/ux/FieldLabeler.js
index c4610de..9048ddd 100644 (file)
--- a/examples/ux/FieldLabeler.js
+++ b/examples/ux/FieldLabeler.js
@@ -1,5 +1,5 @@
 /*!
 /*!

- * Ext JS Library 3.0.3
+ * Ext JS Library 3.1.0

  * Copyright(c) 2006-2009 Ext JS, LLC
  * licensing@extjs.com
  * http://www.extjs.com/license
  * Copyright(c) 2006-2009 Ext JS, LLC
  * licensing@extjs.com
  * http://www.extjs.com/license


@@ -36,8 +36,13 @@ Ext.ux.FieldLabeler = (function(){
 \r
 //      Add behaviour at important points in the Field's lifecycle.\r
         init: function(f) {\r
 \r
 //      Add behaviour at important points in the Field's lifecycle.\r
         init: function(f) {\r

+//          Replace the Field's onRender method with a sequence that calls the plugin's onRender after the Field's onRender\r

             f.onRender = f.onRender.createSequence(this.onRender);\r
             f.onRender = f.onRender.createSequence(this.onRender);\r

-            f.onResize = f.onResize.createSequence(this.onResize);\r
+\r
+//          We need to completely override the onResize method because of the complexity\r
+            f.onResize = this.onResize;\r
+\r
+//          Replace the Field's onDestroy method with a sequence that calls the plugin's onDestroy after the Field's onRender\r

             f.onDestroy = f.onDestroy.createSequence(this.onDestroy);\r
         },\r
 \r
             f.onDestroy = f.onDestroy.createSequence(this.onDestroy);\r
         },\r
 \r


@@ -47,20 +52,26 @@ Ext.ux.FieldLabeler = (function(){
                 if (this.ownerCt.layout instanceof Ext.layout.FormLayout) {\r
                     return;\r
                 }\r
                 if (this.ownerCt.layout instanceof Ext.layout.FormLayout) {\r
                     return;\r
                 }\r

-                if (this.nextSibling()) {\r
-                    this.margins = '0 0 5 0';\r
-                }\r

             }\r
 \r
             }\r
 \r

-            this.resizeEl = this.el.wrap({\r
-                cls: 'x-form-element'\r
+            this.resizeEl = (this.wrap || this.el).wrap({\r
+                cls: 'x-form-element',\r
+                style: Ext.isIE ? 'position:absolute;top:0;left:0;overflow:visible' : ''\r

             });\r
             this.positionEl = this.itemCt = this.resizeEl.wrap({\r
                 cls: 'x-form-item '\r
             });\r
             });\r
             this.positionEl = this.itemCt = this.resizeEl.wrap({\r
                 cls: 'x-form-item '\r
             });\r

+            if (this.nextSibling()) {\r
+                this.margins = {\r
+                    top: 0,\r
+                    right: 0,\r
+                    bottom: this.positionEl.getMargins('b'),\r
+                    left: 0\r
+                };\r
+            }\r

             this.actionMode = 'itemCt';\r
 \r
             this.actionMode = 'itemCt';\r
 \r

-//          If we are hiding labels, then we're done!\r
+//          If our Container is hiding labels, then we're done!\r

             if (!Ext.isDefined(this.hideLabels)) {\r
                 this.hideLabels = getParentProperty.call(this, "hideLabels");\r
             }\r
             if (!Ext.isDefined(this.hideLabels)) {\r
                 this.hideLabels = getParentProperty.call(this, "hideLabels");\r
             }\r


@@ -69,7 +80,7 @@ Ext.ux.FieldLabeler = (function(){
                 return;\r
             }\r
 \r
                 return;\r
             }\r
 \r

-//          Collect info we need to render the label.\r
+//          Collect the info we need to render the label from our Container.\r

             if (!Ext.isDefined(this.labelSeparator)) {\r
                 this.labelSeparator = getParentProperty.call(this, "labelSeparator");\r
             }\r
             if (!Ext.isDefined(this.labelSeparator)) {\r
                 this.labelSeparator = getParentProperty.call(this, "labelSeparator");\r
             }\r


@@ -103,11 +114,20 @@ Ext.ux.FieldLabeler = (function(){
                 html: this.fieldLabel + (this.labelSeparator || ':')\r
             });\r
         },\r
                 html: this.fieldLabel + (this.labelSeparator || ':')\r
             });\r
         },\r

-    \r
+\r

 //      private\r
 //      Ensure the input field is sized to fit in the content area of the resizeEl (to the right of its padding-left)\r
 //      private\r
 //      Ensure the input field is sized to fit in the content area of the resizeEl (to the right of its padding-left)\r

-        onResize: function() {\r
-            this.el.setWidth(this.resizeEl.getWidth(true));\r
+//      We perform all necessary sizing here. We do NOT call the current class's onResize because we need this control\r
+//      we skip that and go up the hierarchy to Ext.form.Field\r
+        onResize: function(w, h) {\r
+            Ext.form.Field.prototype.onResize.apply(this, arguments);\r
+            w -= this.resizeEl.getPadding('l');\r
+            if (this.getTriggerWidth) {\r
+                this.wrap.setWidth(w);\r
+                this.el.setWidth(w - this.getTriggerWidth());\r
+            } else {\r
+                this.el.setWidth(w);\r
+            }\r

             if (this.el.dom.tagName.toLowerCase() == 'textarea') {\r
                 var h = this.resizeEl.getHeight(true);\r
                 if (!this.hideLabels && (this.labelAlign == 'top')) {\r
             if (this.el.dom.tagName.toLowerCase() == 'textarea') {\r
                 var h = this.resizeEl.getHeight(true);\r
                 if (!this.hideLabels && (this.labelAlign == 'top')) {\r