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'>/**
  19 </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 Ext.define('Ext.form.field.Display', {
  54     extend:'Ext.form.field.Base',
  55     alias: 'widget.displayfield',
  56     requires: ['Ext.util.Format', 'Ext.XTemplate'],
  57     alternateClassName: ['Ext.form.DisplayField', 'Ext.form.Display'],
  58     fieldSubTpl: [
  59         '&lt;div id=&quot;{id}&quot; class=&quot;{fieldCls}&quot;&gt;&lt;/div&gt;',
  60         {
  61             compiled: true,
  62             disableFormats: true
  63         }
  64     ],
  65
  66 <span id='Ext-form-field-Display-cfg-fieldCls'>    /**
  67 </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;)
  68      */
  69     fieldCls: Ext.baseCSSPrefix + 'form-display-field',
  70
  71 <span id='Ext-form-field-Display-cfg-htmlEncode'>    /**
  72 </span>     * @cfg {Boolean} htmlEncode &lt;tt&gt;false&lt;/tt&gt; to skip HTML-encoding the text when rendering it (defaults to
  73      * &lt;tt&gt;false&lt;/tt&gt;). This might be useful if you want to include tags in the field's innerHTML rather than
  74      * rendering them as string literals per the default logic.
  75      */
  76     htmlEncode: false,
  77
  78     validateOnChange: false,
  79
  80     initEvents: Ext.emptyFn,
  81
  82     submitValue: false,
  83
  84     isValid: function() {
  85         return true;
  86     },
  87
  88     validate: function() {
  89         return true;
  90     },
  91
  92     getRawValue: function() {
  93         return this.rawValue;
  94     },
  95
  96     setRawValue: function(value) {
  97         var me = this;
  98         value = Ext.value(value, '');
  99         me.rawValue = value;
 100         if (me.rendered) {
 101             me.inputEl.dom.innerHTML = me.htmlEncode ? Ext.util.Format.htmlEncode(value) : value;
 102         }
 103         return value;
 104     },
 105
 106     // private
 107     getContentTarget: function() {
 108         return this.inputEl;
 109     }
 110
 111 <span id='Ext-form-field-Display-cfg-inputType'>    /**
 112 </span>     * @cfg {String} inputType
 113      * @hide
 114      */
 115 <span id='Ext-form-field-Display-cfg-disabled'>    /**
 116 </span>     * @cfg {Boolean} disabled
 117      * @hide
 118      */
 119 <span id='Ext-form-field-Display-cfg-readOnly'>    /**
 120 </span>     * @cfg {Boolean} readOnly
 121      * @hide
 122      */
 123 <span id='Ext-form-field-Display-cfg-validateOnChange'>    /**
 124 </span>     * @cfg {Boolean} validateOnChange
 125      * @hide
 126      */
 127 <span id='Ext-form-field-Display-cfg-checkChangeEvents'>    /**
 128 </span>     * @cfg {Number} checkChangeEvents
 129      * @hide
 130      */
 131 <span id='Ext-form-field-Display-cfg-checkChangeBuffer'>    /**
 132 </span>     * @cfg {Number} checkChangeBuffer
 133      * @hide
 134      */
 135 });
 136 </pre>
 137 </body>
 138 </html>