Upgrade to ExtJS 3.0.3 - Released 10/11/2009
[extjs.git] / examples / ux / FieldLabeler.js
diff --git a/examples/ux/FieldLabeler.js b/examples/ux/FieldLabeler.js
new file mode 100644 (file)
index 0000000..c4610de
--- /dev/null
@@ -0,0 +1,126 @@
+/*!
+ * Ext JS Library 3.0.3
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+Ext.ns("Ext.ux");\r
+\r
+/**\r
+ * @class Ext.ux.FieldLabeler\r
+ * <p>A plugin for Field Components which renders standard Ext form wrapping and labels\r
+ * round the Field at render time regardless of the layout of the Container.</p>\r
+ * <p>Usage:</p>\r
+ * <pre><code>\r
+    {\r
+        xtype: 'combo',\r
+        plugins: [ Ext.ux.FieldLabeler ],\r
+        triggerAction: 'all',\r
+        fieldLabel: 'Select type',\r
+        store: typeStore\r
+    }\r
+ * </code></pre>\r
+ */\r
+Ext.ux.FieldLabeler = (function(){\r
+\r
+//  Pulls a named property down from the first ancestor Container it's found in\r
+    function getParentProperty(propName) {\r
+        for (var p = this.ownerCt; p; p = p.ownerCt) {\r
+            if (p[propName]) {\r
+                return p[propName];\r
+            }\r
+        }\r
+    }\r
+\r
+    return {\r
+\r
+//      Add behaviour at important points in the Field's lifecycle.\r
+        init: function(f) {\r
+            f.onRender = f.onRender.createSequence(this.onRender);\r
+            f.onResize = f.onResize.createSequence(this.onResize);\r
+            f.onDestroy = f.onDestroy.createSequence(this.onDestroy);\r
+        },\r
+\r
+        onRender: function() {\r
+//          Do nothing if being rendered by a form layout\r
+            if (this.ownerCt) {\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
+            this.resizeEl = this.el.wrap({\r
+                cls: 'x-form-element'\r
+            });\r
+            this.positionEl = this.itemCt = this.resizeEl.wrap({\r
+                cls: 'x-form-item '\r
+            });\r
+            this.actionMode = 'itemCt';\r
+\r
+//          If we are hiding labels, then we're done!\r
+            if (!Ext.isDefined(this.hideLabels)) {\r
+                this.hideLabels = getParentProperty.call(this, "hideLabels");\r
+            }\r
+            if (this.hideLabels) {\r
+                this.resizeEl.setStyle('padding-left', '0px');\r
+                return;\r
+            }\r
+\r
+//          Collect info we need to render the label.\r
+            if (!Ext.isDefined(this.labelSeparator)) {\r
+                this.labelSeparator = getParentProperty.call(this, "labelSeparator");\r
+            }\r
+            if (!Ext.isDefined(this.labelPad)) {\r
+                this.labelPad = getParentProperty.call(this, "labelPad");\r
+            }\r
+            if (!Ext.isDefined(this.labelAlign)) {\r
+                this.labelAlign = getParentProperty.call(this, "labelAlign") || 'left';\r
+            }\r
+            this.itemCt.addClass('x-form-label-' + this.labelAlign);\r
+\r
+            if(this.labelAlign == 'top'){\r
+                if (!this.labelWidth) {\r
+                    this.labelWidth = 'auto';\r
+                }\r
+                this.resizeEl.setStyle('padding-left', '0px');\r
+            } else {\r
+                if (!Ext.isDefined(this.labelWidth)) {\r
+                    this.labelWidth = getParentProperty.call(this, "labelWidth") || 100;\r
+                }\r
+                this.resizeEl.setStyle('padding-left', (this.labelWidth + (this.labelPad || 5)) + 'px');\r
+                this.labelWidth += 'px';\r
+            }\r
+\r
+            this.label = this.itemCt.insertFirst({\r
+                tag: 'label',\r
+                cls: 'x-form-item-label',\r
+                style: {\r
+                    width: this.labelWidth\r
+                },\r
+                html: this.fieldLabel + (this.labelSeparator || ':')\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
+        onResize: function() {\r
+            this.el.setWidth(this.resizeEl.getWidth(true));\r
+            if (this.el.dom.tagName.toLowerCase() == 'textarea') {\r
+                var h = this.resizeEl.getHeight(true);\r
+                if (!this.hideLabels && (this.labelAlign == 'top')) {\r
+                    h -= this.label.getHeight();\r
+                }\r
+                this.el.setHeight(h);\r
+            }\r
+        },\r
+\r
+//      private\r
+//      Ensure that we clean up on destroy.\r
+        onDestroy: function() {\r
+            this.itemCt.remove();\r
+        }\r
+    };\r
+})();
\ No newline at end of file