
Ext.override(Ext.form.Field, {
    getForm: function(){
        var form;
        this.ownerCt.bubble(function(container){
            if (container.form) {
                form = container.form;
                return false;
            }
        }, this);
        
        return form;
    },
    
	
    onRender: function(ct, position){
        Ext.form.Field.superclass.onRender.call(this, ct, position);
				
        if (!this.el) {
            var cfg = this.getAutoCreate();
            if (!cfg.name) {
                cfg.name = this.name || this.id;
            }
            if (this.inputType) {
                cfg.type = this.inputType;
            }
            this.el = ct.createChild(cfg, position);
        }
        var type = this.el.dom.type;
		
        if (type) {
            if (type == 'password') {
                type = 'text';
            }
            this.el.addClass('x-form-' + type);
        }
		
        if (this.readOnly) {
            this.el.dom.readOnly = true;
        }
		
        if (this.tabIndex !== undefined) {
            this.el.dom.setAttribute('tabIndex', this.tabIndex);
        }
        this.el.addClass([this.fieldClass, this.cls]);
        this.initValue();
        // everything above is from the original onRender function
        
        // create the appended fields
        var ac = this.append || [];
        if (ac.length > 0) {
			//remove anchor we don't support it
			delete this.anchor;
			
            var form = this.getForm();
            
            // create a wrap for all the fields including the one created above
            this.wrap = this.el.wrap({
                tag: 'div'
            });
            // also, wrap the field create above with the same div as the appending fields
            //Ext.util.CSS.createStyleSheet('.x-form-append { float: left; padding-right: 3px;}', 'x-form-append');
            //this.el.wrap({ tag: 'div', cls: 'x-form-append', style: 'position: relative;' });
            this.el.wrap({
                tag: 'div',
                style: 'position: relative;float: left; padding-right: 3px;'
            });
            for (var i = 0, len = ac.length; i < len; i++) {
                // if the append field has append fields, delete this
                delete ac[i].append;
                // create a div wrapper with the new field within it.
                // var cell = this.wrap.createChild({ tag: 'div', cls: 'x-form-append', style: 'position: relative' });
                var cell = this.wrap.createChild({
                    tag: 'div',
                    style: 'position: relative;float: left; padding-right: 3px;'
                });
                var field = new Ext.ComponentMgr.create(ac[i], 'button');
                // render the field
                field.render(cell);
                
                if (form && field.isFormField) {
                    form.items.add(field);
                }
            }
        }
        
        // if there is helpText create a div and display the text below the field
        if (typeof this.helpText == 'string') {
            this.wrap = this.el.wrap() || this.wrap;
            //Ext.util.CSS.createStyleSheet('.x-form-helptext { clear: both; font-size: 9px; color: #888; padding-top: 3px;}', 'x-form-helptext');
            //this.wrap.createChild({ tag: 'div', cls: 'x-form-helptext', html: this.helpText });
            this.wrap.createChild({
                tag: 'div',
                style: 'clear: both; font-size: 9px; color: #888; padding-top: 3px;',
                html: this.helpText
            });
        }
    }
});
