docs/source/Display.html

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