/**
 * @author Bhaidaya
 */
Ext.ux.StaticField = Ext.extend(Ext.form.Field, {
    fieldClass: 'x-static-text-field',
    hidden: true,
    disabled: true,
	displayAsHTML: true,
	template: '{0}',
    
    onRender: function(ct, position){
        Ext.ux.StaticField.superclass.onRender.call(this, ct, position);
        
        this.displayId = this.id + '-display';
        this.displayEl = this.el.insertSibling({
			id: this.displayId,
            tag: 'span',
            style: this.style || '',
            cls: 'x-static-text-field-display' + ' ' + (this.cls || '')
        });
        
		
        this.addClass = function(classname){
            this.displayEl.addClass(classname);
        };
        this.removeClass = function(classname){
            this.displayEl.removeClass(classname);
        };
        //show
        //hide
        //setVisible
    },
    
    setValue: function(value){
        Ext.ux.StaticField.superclass.setValue.call(this, value);
        var t = new Ext.Template(this.template);
		
        if (!Ext.isEmpty(this.displayEl)) {
        	if( !this.displayAsHTML ){
				value = value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\r\n|\r|\n/g, "<br>");
			}  
            this.displayEl.dom.innerHTML = t.apply([value]);
        }
    },
    
    onDestroy: function(){
        if (this.rendered) {
            this.displayEl.remove();
        }
        Ext.ux.StaticField.superclass.onDestroy.call(this);
    }
});

Ext.reg('displayfield', Ext.ux.StaticField);
/*
 * Required for above to work correctly
 input.x-static-text-field {
 background: transparent;
 border: none;
 color: inherit;
 -moz-opacity: 1;
 opacity: 1;
 filter: alpha(opacity=100);
 }
 */