docs/source/FieldLabeler.html

   1 <html>
   2 <head>
   3   <title>The source code</title>
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   6 </head>
   7 <body  onload="prettyPrint();">
   8     <pre class="prettyprint lang-js">Ext.ns("Ext.ux");\r
   9 \r
  10 <div id="cls-Ext.ux.FieldLabeler"></div>/**\r
  11  * @class Ext.ux.FieldLabeler\r
  12  * <p>A plugin for Field Components which renders standard Ext form wrapping and labels\r
  13  * round the Field at render time regardless of the layout of the Container.</p>\r
  14  * <p>Usage:</p>\r
  15  * <pre><code>\r
  16     {\r
  17         xtype: 'combo',\r
  18         plugins: [ Ext.ux.FieldLabeler ],\r
  19         triggerAction: 'all',\r
  20         fieldLabel: 'Select type',\r
  21         store: typeStore\r
  22     }\r
  23  * </code></pre>\r
  24  */\r
  25 Ext.ux.FieldLabeler = (function(){\r
  26 \r
  27 //  Pulls a named property down from the first ancestor Container it's found in\r
  28     function getParentProperty(propName) {\r
  29         for (var p = this.ownerCt; p; p = p.ownerCt) {\r
  30             if (p[propName]) {\r
  31                 return p[propName];\r
  32             }\r
  33         }\r
  34     }\r
  35 \r
  36     return {\r
  37 \r
  38 //      Add behaviour at important points in the Field's lifecycle.\r
  39         init: function(f) {\r
  40             f.onRender = f.onRender.createSequence(this.onRender);\r
  41             f.onResize = f.onResize.createSequence(this.onResize);\r
  42             f.onDestroy = f.onDestroy.createSequence(this.onDestroy);\r
  43         },\r
  44 \r
  45         onRender: function() {\r
  46 //          Do nothing if being rendered by a form layout\r
  47             if (this.ownerCt) {\r
  48                 if (this.ownerCt.layout instanceof Ext.layout.FormLayout) {\r
  49                     return;\r
  50                 }\r
  51                 if (this.nextSibling()) {\r
  52                     this.margins = '0 0 5 0';\r
  53                 }\r
  54             }\r
  55 \r
  56             this.resizeEl = this.el.wrap({\r
  57                 cls: 'x-form-element'\r
  58             });\r
  59             this.positionEl = this.itemCt = this.resizeEl.wrap({\r
  60                 cls: 'x-form-item '\r
  61             });\r
  62             this.actionMode = 'itemCt';\r
  63 \r
  64 //          If we are hiding labels, then we're done!\r
  65             if (!Ext.isDefined(this.hideLabels)) {\r
  66                 this.hideLabels = getParentProperty.call(this, "hideLabels");\r
  67             }\r
  68             if (this.hideLabels) {\r
  69                 this.resizeEl.setStyle('padding-left', '0px');\r
  70                 return;\r
  71             }\r
  72 \r
  73 //          Collect info we need to render the label.\r
  74             if (!Ext.isDefined(this.labelSeparator)) {\r
  75                 this.labelSeparator = getParentProperty.call(this, "labelSeparator");\r
  76             }\r
  77             if (!Ext.isDefined(this.labelPad)) {\r
  78                 this.labelPad = getParentProperty.call(this, "labelPad");\r
  79             }\r
  80             if (!Ext.isDefined(this.labelAlign)) {\r
  81                 this.labelAlign = getParentProperty.call(this, "labelAlign") || 'left';\r
  82             }\r
  83             this.itemCt.addClass('x-form-label-' + this.labelAlign);\r
  84 \r
  85             if(this.labelAlign == 'top'){\r
  86                 if (!this.labelWidth) {\r
  87                     this.labelWidth = 'auto';\r
  88                 }\r
  89                 this.resizeEl.setStyle('padding-left', '0px');\r
  90             } else {\r
  91                 if (!Ext.isDefined(this.labelWidth)) {\r
  92                     this.labelWidth = getParentProperty.call(this, "labelWidth") || 100;\r
  93                 }\r
  94                 this.resizeEl.setStyle('padding-left', (this.labelWidth + (this.labelPad || 5)) + 'px');\r
  95                 this.labelWidth += 'px';\r
  96             }\r
  97 \r
  98             this.label = this.itemCt.insertFirst({\r
  99                 tag: 'label',\r
 100                 cls: 'x-form-item-label',\r
 101                 style: {\r
 102                     width: this.labelWidth\r
 103                 },\r
 104                 html: this.fieldLabel + (this.labelSeparator || ':')\r
 105             });\r
 106         },\r
 107     \r
 108 //      private\r
 109 //      Ensure the input field is sized to fit in the content area of the resizeEl (to the right of its padding-left)\r
 110         onResize: function() {\r
 111             this.el.setWidth(this.resizeEl.getWidth(true));\r
 112             if (this.el.dom.tagName.toLowerCase() == 'textarea') {\r
 113                 var h = this.resizeEl.getHeight(true);\r
 114                 if (!this.hideLabels && (this.labelAlign == 'top')) {\r
 115                     h -= this.label.getHeight();\r
 116                 }\r
 117                 this.el.setHeight(h);\r
 118             }\r
 119         },\r
 120 \r
 121 //      private\r
 122 //      Ensure that we clean up on destroy.\r
 123         onDestroy: function() {\r
 124             this.itemCt.remove();\r
 125         }\r
 126     };\r
 127 })();</pre>
 128 </body>
 129 </html>