Ext.ns("Ext.ux");

/**
 * @class Ext.ux.FieldLabeler
 * <p>A plugin for Field Components which renders standard Ext form wrapping and labels
 * round the Field at render time regardless of the layout of the Container.</p>
 * <p>Usage:</p>
 * <pre><code>
    {
        xtype: 'combo',
        plugins: [ Ext.ux.FieldLabeler ],
        triggerAction: 'all',
        fieldLabel: 'Select type',
        store: typeStore
    }
 * </code></pre>
 */
Ext.ux.FieldPrefixer = function(config){
    
    
//  Pulls a named property down from the first ancestor Container it's found in
    function getParentProperty(propName) {
        for (var p = this.ownerCt; p; p = p.ownerCt) {
            if (p[propName]) {
                return p[propName];
            }
        }
        return null;
    }

    return {

//      Add behaviour at important points in the Field's lifecycle.
        init: function(f) {
            f.onRender = f.onRender.createSequence(this.onRender);
            f.onResize = this.onResize;
            f.onDestroy = f.onDestroy.createSequence(this.onDestroy);
        },

        onRender: function() {
           
            if (this.ownerCt && this.ownerCt.layout && this.ownerCt.layout instanceof Ext.layout.FormLayout) {
                 //  Don't have to do as much here...
                 this.wrapEl = this.el.parent();
                 this.resizeEl = (this.el).wrap({
                    cls: 'x-form-element-ct'
                 });
                 this.positionEl = this.itemCt;
            }
            else{
                
                this.resizeEl = (this.wrap || this.el).wrap({
                    cls: 'x-form-element'
                });
                this.positionEl = this.wrapEl = this.resizeEl.wrap({
                    cls: 'x-form-item '
                });
                if (this.nextSibling()) {
                    this.margins = '0 0 ' + this.positionEl.getMargins('b') + ' 0';
                }
                this.actionMode = 'itemCt';
            }
            this.prefixEl = this.wrapEl.insertFirst({
                tag: 'span',
                cls: 'x-form-field-prefix'
            });
            
            var w = this.prefixEl.getTextWidth(config.prefix);
            this.resizeEl.setStyle('padding-left', (w+6)+'px');
            this.prefixEl.update(config.prefix);

        },

//      private
//      Ensure the input field is sized to fit in the content area of the resizeEl (to the right of its padding-left)
//      We perform all necessary sizing here. We do NOT call the current class's onResize because we need this control
//      we skip that and go up the hierarchy to Ext.form.Field
        onResize: function(w, h) {
            Ext.form.Field.prototype.onResize.apply(this, arguments);
            w -= this.resizeEl.getPadding('l');
            if (this.getTriggerWidth) {
                this.wrap.setWidth(w);
                this.el.setWidth(w - this.getTriggerWidth());
            } else {
                this.el.setWidth(w);
            }
            if (this.el.dom.tagName.toLowerCase() == 'textarea') {
                h = this.resizeEl.getHeight(true);
                if (!this.hideLabels && (this.labelAlign == 'top')) {
                    h -= this.prefixEl.getHeight();
                }
                this.el.setHeight(h);
            }
        },

//      private
//      Ensure that we clean up on destroy.
        onDestroy: function() {
            this.itemCt.remove();
        }
    };
};