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="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/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> * A display-only text field which is not validated and not submitted. This is useful for when you want to display a
  20  * value from a form's {@link Ext.form.Basic#load loaded data} but do not want to allow the user to edit or submit that
  21  * value. The value can be optionally {@link #htmlEncode HTML encoded} if it contains HTML markup that you do not want
  22  * to be rendered.
  23  *
  24  * If you have more complex content, or need to include components within the displayed content, also consider using a
  25  * {@link Ext.form.FieldContainer} instead.
  26  *
  27  * Example:
  28  *
  29  *     @example
  30  *     Ext.create('Ext.form.Panel', {
  31  *         renderTo: Ext.getBody(),
  32  *         width: 175,
  33  *         height: 120,
  34  *         bodyPadding: 10,
  35  *         title: 'Final Score',
  36  *         items: [{
  37  *             xtype: 'displayfield',
  38  *             fieldLabel: 'Home',
  39  *             name: 'home_score',
  40  *             value: '10'
  41  *         }, {
  42  *             xtype: 'displayfield',
  43  *             fieldLabel: 'Visitor',
  44  *             name: 'visitor_score',
  45  *             value: '11'
  46  *         }],
  47  *         buttons: [{
  48  *             text: 'Update',
  49  *         }]
  50  *     });
  51  */
  52 Ext.define('Ext.form.field.Display', {
  53     extend:'Ext.form.field.Base',
  54     alias: 'widget.displayfield',
  55     requires: ['Ext.util.Format', 'Ext.XTemplate'],
  56     alternateClassName: ['Ext.form.DisplayField', 'Ext.form.Display'],
  57     fieldSubTpl: [
  58         '&lt;div id=&quot;{id}&quot; class=&quot;{fieldCls}&quot;&gt;&lt;/div&gt;',
  59         {
  60             compiled: true,
  61             disableFormats: true
  62         }
  63     ],
  64
  65 <span id='Ext-form-field-Display-cfg-fieldCls'>    /**
  66 </span>     * @cfg {String} [fieldCls=&quot;x-form-display-field&quot;]
  67      * The default CSS class for the field.
  68      */
  69     fieldCls: Ext.baseCSSPrefix + 'form-display-field',
  70
  71 <span id='Ext-form-field-Display-cfg-htmlEncode'>    /**
  72 </span>     * @cfg {Boolean} htmlEncode
  73      * false to skip HTML-encoding the text when rendering it. This might be useful if you want to
  74      * include tags in the field's innerHTML rather than 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>