examples/docs/source/FieldLabeler.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>The source code</title>
   5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   7 </head>
   8 <body  onload="prettyPrint();">
   9     <pre class="prettyprint lang-js">/*!
  10  * Ext JS Library 3.3.1
  11  * Copyright(c) 2006-2010 Sencha Inc.
  12  * licensing@sencha.com
  13  * http://www.sencha.com/license
  14  */
  15 Ext.ns("Ext.ux");
  16
  17 <div id="cls-Ext.ux.FieldLabeler"></div>/**
  18  * @class Ext.ux.FieldLabeler
  19  * <p>A plugin for Field Components which renders standard Ext form wrapping and labels
  20  * round the Field at render time regardless of the layout of the Container.</p>
  21  * <p>Usage:</p>
  22  * <pre><code>
  23     {
  24         xtype: 'combo',
  25         plugins: [ Ext.ux.FieldLabeler ],
  26         triggerAction: 'all',
  27         fieldLabel: 'Select type',
  28         store: typeStore
  29     }
  30  * </code></pre>
  31  */
  32 Ext.ux.FieldLabeler = (function(){
  33
  34 //  Pulls a named property down from the first ancestor Container it's found in
  35     function getParentProperty(propName) {
  36         for (var p = this.ownerCt; p; p = p.ownerCt) {
  37             if (p[propName]) {
  38                 return p[propName];
  39             }
  40         }
  41     }
  42
  43     return {
  44
  45 //      Add behaviour at important points in the Field's lifecycle.
  46         init: function(f) {
  47 //          Replace the Field's onRender method with a sequence that calls the plugin's onRender after the Field's onRender
  48             f.onRender = f.onRender.createSequence(this.onRender);
  49
  50 //          We need to completely override the onResize method because of the complexity
  51             f.onResize = this.onResize;
  52
  53 //          Replace the Field's onDestroy method with a sequence that calls the plugin's onDestroy after the Field's onRender
  54             f.onDestroy = f.onDestroy.createSequence(this.onDestroy);
  55         },
  56
  57         onRender: function() {
  58 //          Do nothing if being rendered by a form layout
  59             if (this.ownerCt) {
  60                 if (this.ownerCt.layout instanceof Ext.layout.FormLayout) {
  61                     return;
  62                 }
  63             }
  64
  65             this.resizeEl = (this.wrap || this.el).wrap({
  66                 cls: 'x-form-element',
  67                 style: (Ext.isIE || Ext.isOpera) ? 'position:absolute;top:0;left:0;overflow:visible' : ''
  68             });
  69             this.positionEl = this.itemCt = this.resizeEl.wrap({
  70                 cls: 'x-form-item '
  71             });
  72             if (this.nextSibling()) {
  73                 this.margins = {
  74                     top: 0,
  75                     right: 0,
  76                     bottom: this.positionEl.getMargins('b'),
  77                     left: 0
  78                 };
  79             }
  80             this.actionMode = 'itemCt';
  81
  82 //          If our Container is hiding labels, then we're done!
  83             if (!Ext.isDefined(this.hideLabels)) {
  84                 this.hideLabels = getParentProperty.call(this, "hideLabels");
  85             }
  86             if (this.hideLabels) {
  87                 this.resizeEl.setStyle('padding-left', '0px');
  88                 return;
  89             }
  90
  91 //          Collect the info we need to render the label from our Container.
  92             if (!Ext.isDefined(this.labelSeparator)) {
  93                 this.labelSeparator = getParentProperty.call(this, "labelSeparator");
  94             }
  95             if (!Ext.isDefined(this.labelPad)) {
  96                 this.labelPad = getParentProperty.call(this, "labelPad");
  97             }
  98             if (!Ext.isDefined(this.labelAlign)) {
  99                 this.labelAlign = getParentProperty.call(this, "labelAlign") || 'left';
 100             }
 101             this.itemCt.addClass('x-form-label-' + this.labelAlign);
 102
 103             if(this.labelAlign == 'top'){
 104                 if (!this.labelWidth) {
 105                     this.labelWidth = 'auto';
 106                 }
 107                 this.resizeEl.setStyle('padding-left', '0px');
 108             } else {
 109                 if (!Ext.isDefined(this.labelWidth)) {
 110                     this.labelWidth = getParentProperty.call(this, "labelWidth") || 100;
 111                 }
 112                 this.resizeEl.setStyle('padding-left', (this.labelWidth + (this.labelPad || 5)) + 'px');
 113                 this.labelWidth += 'px';
 114             }
 115
 116             this.label = this.itemCt.insertFirst({
 117                 tag: 'label',
 118                 cls: 'x-form-item-label',
 119                 style: {
 120                     width: this.labelWidth
 121                 },
 122                 html: this.fieldLabel + (this.labelSeparator || ':')
 123             });
 124         },
 125
 126 //      private
 127 //      Ensure the input field is sized to fit in the content area of the resizeEl (to the right of its padding-left)
 128 //      We perform all necessary sizing here. We do NOT call the current class's onResize because we need this control
 129 //      we skip that and go up the hierarchy to Ext.form.Field
 130         onResize: function(w, h) {
 131             Ext.form.Field.prototype.onResize.apply(this, arguments);
 132             w -= this.resizeEl.getPadding('l');
 133             if (this.getTriggerWidth) {
 134                 this.wrap.setWidth(w);
 135                 this.el.setWidth(w - this.getTriggerWidth());
 136             } else {
 137                 this.el.setWidth(w);
 138             }
 139             if (this.el.dom.tagName.toLowerCase() == 'textarea') {
 140                 var h = this.resizeEl.getHeight(true);
 141                 if (!this.hideLabels && (this.labelAlign == 'top')) {
 142                     h -= this.label.getHeight();
 143                 }
 144                 this.el.setHeight(h);
 145             }
 146         },
 147
 148 //      private
 149 //      Ensure that we clean up on destroy.
 150         onDestroy: function() {
 151             this.itemCt.remove();
 152         }
 153     };
 154 })();</pre>
 155 </body>
 156 </html>