examples/ux/FieldLabeler.js

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