src/form/field/Display.js

   1 /**
   2  * @class Ext.form.field.Display
   3  * @extends Ext.form.field.Base
   4  * <p>A display-only text field which is not validated and not submitted. This is useful for when you want
   5  * to display a value from a form's {@link Ext.form.Basic#load loaded data} but do not want to allow the
   6  * user to edit or submit that value. The value can be optionally {@link #htmlEncode HTML encoded} if it contains
   7  * HTML markup that you do not want to be rendered.</p>
   8  * <p>If you have more complex content, or need to include components within the displayed content, also
   9  * consider using a {@link Ext.form.FieldContainer} instead.</p>
  10  * {@img Ext.form.Display/Ext.form.Display.png Ext.form.Display component}
  11  * <p>Example:</p>
  12  * <pre><code>
  13     Ext.create('Ext.form.Panel', {
  14         width: 175,
  15         height: 120,
  16         bodyPadding: 10,
  17         title: 'Final Score',
  18         items: [{
  19             xtype: 'displayfield',
  20             fieldLabel: 'Home',
  21             name: 'home_score',
  22             value: '10'
  23         }, {
  24             xtype: 'displayfield',
  25             fieldLabel: 'Visitor',
  26             name: 'visitor_score',
  27             value: '11'
  28         }],
  29         buttons: [{
  30             text: 'Update',
  31         }],
  32         renderTo: Ext.getBody()
  33     });
  34 </code></pre>
  35
  36  * @constructor
  37  * Creates a new DisplayField.
  38  * @param {Object} config Configuration options
  39  *
  40  * @xtype displayfield
  41  */
  42 Ext.define('Ext.form.field.Display', {
  43     extend:'Ext.form.field.Base',
  44     alias: 'widget.displayfield',
  45     requires: ['Ext.util.Format', 'Ext.XTemplate'],
  46     alternateClassName: ['Ext.form.DisplayField', 'Ext.form.Display'],
  47     fieldSubTpl: [
  48         '<div id="{id}" class="{fieldCls}"></div>',
  49         {
  50             compiled: true,
  51             disableFormats: true
  52         }
  53     ],
  54
  55     /**
  56      * @cfg {String} fieldCls The default CSS class for the field (defaults to <tt>"x-form-display-field"</tt>)
  57      */
  58     fieldCls: Ext.baseCSSPrefix + 'form-display-field',
  59
  60     /**
  61      * @cfg {Boolean} htmlEncode <tt>false</tt> to skip HTML-encoding the text when rendering it (defaults to
  62      * <tt>false</tt>). This might be useful if you want to include tags in the field's innerHTML rather than
  63      * rendering them as string literals per the default logic.
  64      */
  65     htmlEncode: false,
  66
  67     validateOnChange: false,
  68
  69     initEvents: Ext.emptyFn,
  70
  71     submitValue: false,
  72
  73     isValid: function() {
  74         return true;
  75     },
  76
  77     validate: function() {
  78         return true;
  79     },
  80
  81     getRawValue: function() {
  82         return this.rawValue;
  83     },
  84
  85     setRawValue: function(value) {
  86         var me = this;
  87         value = Ext.value(value, '');
  88         me.rawValue = value;
  89         if (me.rendered) {
  90             me.inputEl.dom.innerHTML = me.htmlEncode ? Ext.util.Format.htmlEncode(value) : value;
  91         }
  92         return value;
  93     },
  94
  95     // private
  96     getContentTarget: function() {
  97         return this.inputEl;
  98     }
  99
 100     /**
 101      * @cfg {String} inputType
 102      * @hide
 103      */
 104     /**
 105      * @cfg {Boolean} disabled
 106      * @hide
 107      */
 108     /**
 109      * @cfg {Boolean} readOnly
 110      * @hide
 111      */
 112     /**
 113      * @cfg {Boolean} validateOnChange
 114      * @hide
 115      */
 116     /**
 117      * @cfg {Number} checkChangeEvents
 118      * @hide
 119      */
 120     /**
 121      * @cfg {Number} checkChangeBuffer
 122      * @hide
 123      */
 124 });