Roo/form/DisplayField.js

/*
 * Based on:
 * Ext JS Library 1.1.1
 * Copyright(c) 2006-2007, Ext JS, LLC.
 *
 * Originally Released Under LGPL - original licence link has changed is not relivant.
 *
 * Fork - LGPL
 * <script type="text/javascript">
 */
/**
 * @class Roo.form.DisplayField
 * @extends Roo.form.Field
 * A generic Field to display non-editable data.
 * @cfg {Boolean} closable (true|false) default false
 * @constructor
 * Creates a new Display Field item.
 * @param {Object} config Configuration options
 */
Roo.form.DisplayField = function(config){
    Roo.form.DisplayField.superclass.constructor.call(this, config);

    this.addEvents({
        /**
         * @event close
         * Fires after the click the close btn
	     * @param {Roo.form.DisplayField} this
	     */
        close : true
    });
};

Roo.extend(Roo.form.DisplayField, Roo.form.TextField,  {
    inputType:      'hidden',
    allowBlank:     true,
    readOnly:         true,


    /**
     * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
     */
    focusClass : undefined,
    /**
     * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
     */
    fieldClass: 'x-form-field',

     /**
     * @cfg {Function} valueRenderer The renderer for the field (so you can reformat output). should return raw HTML
     */
    valueRenderer: undefined,

    width: 100,
    /**
     * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
     * {tag: "input", type: "checkbox", autocomplete: "off"})
     */

 //   defaultAutoCreate : { tag: 'input', type: 'hidden', autocomplete: 'off'},

    closable : false,

    onResize : function(){
        Roo.form.DisplayField.superclass.onResize.apply(this, arguments);

    },

    initEvents : function(){
        // Roo.form.Checkbox.superclass.initEvents.call(this);
        // has no events...

        if(this.closable){
            this.closeEl.on('click', this.onClose, this);
        }

    },


    getResizeEl : function(){
        return this.wrap;
    },

    getPositionEl : function(){
        return this.wrap;
    },

    // private
    onRender : function(ct, position){

        Roo.form.DisplayField.superclass.onRender.call(this, ct, position);
        //if(this.inputValue !== undefined){
        this.wrap = this.el.wrap();

        this.viewEl = this.wrap.createChild({ tag: 'div', cls: 'x-form-displayfield'});

        if(this.closable){
            this.closeEl = this.wrap.createChild({ tag: 'div', cls: 'x-dlg-close'});
        }

        if (this.bodyStyle) {
            this.viewEl.applyStyles(this.bodyStyle);
        }
        //this.viewEl.setStyle('padding', '2px');

        this.setValue(this.value);

    },
/*
    // private
    initValue : Roo.emptyFn,

  */

	// private
    onClick : function(){

    },

    /**
     * Sets the checked state of the checkbox.
     * @param {Boolean/String} checked True, 'true', '1', or 'on' to check the checkbox, any other value will uncheck it.
     */
    setValue : function(v){
        this.value = v;
        var html = this.valueRenderer ?  this.valueRenderer(v) : String.format('{0}', v);
        // this might be called before we have a dom element..
        if (!this.viewEl) {
            return;
        }
        this.viewEl.dom.innerHTML = html;
        Roo.form.DisplayField.superclass.setValue.call(this, v);

    },

    onClose : function(e)
    {
        e.preventDefault();

        this.fireEvent('close', this);
    }
});