text: /**
   * A display-only text field which is not validated and not submitted. This is useful for when you want to display a
   * 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
   * value. The value can be optionally {@link #htmlEncode HTML encoded} if it contains HTML markup that you do not want
   * to be rendered.
   *
   * If you have more complex content, or need to include components within the displayed content, also consider using a
   * {@link Ext.form.FieldContainer} instead.
   *
   * Example:
   *
   *     @example
   *     Ext.create('Ext.form.Panel', {
   *         renderTo: Ext.getBody(),
   *         width: 175,
   *         height: 150,
   *         bodyPadding: 10,
   *         title: 'Final Score',
   *         items: [{
   *             xtype: 'displayfield',
   *             fieldLabel: 'Home',
   *             name: 'home_score',
   *             value: '10'
   *         }, {
   *             xtype: 'displayfield',
   *             fieldLabel: 'Visitor',
   *             name: 'visitor_score',
   *             value: '11'
   *         }],
   *         buttons: [{
   *             text: 'Update'
   *         }]
   *     });
   */
  Ext.define('Ext.form.field.Display', {
      extend: 'Ext.form.field.Base',
      alias: 'widget.displayfield',
      requires: ['Ext.util.Format', 'Ext.XTemplate'],
      alternateClassName: ['Ext.form.DisplayField', 'Ext.form.Display'],
  
      fieldSubTpl: [
          '<div id="{id}" data-ref="inputEl" role="textbox" aria-readonly="true"',
          ' aria-labelledby="{cmpId}-labelEl" {inputAttrTpl}',
          ' tabindex="<tpl if="tabIdx != null">{tabIdx}<tpl else>-1</tpl>"',
          '<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
          ' class="{fieldCls} {fieldCls}-{ui}">{value}</div>',
          {
              compiled: true,
              disableFormats: true
          }
      ],
  
      // We have the ARIA markup pre-rendered so we don't want it to be applied
      ariaRole: undefined,
  
      focusable: false,
  
      // Display fields are divs not real input fields, so rendering
      // "for" attribute in the label does not do any good.
      skipLabelForAttribute: true,
  
      /**
       * @cfg {Boolean} readOnly
       * @private
       */
      readOnly: true,
  
      /**
       * @cfg {String} [fieldCls="x-form-display-field"]
       * The default CSS class for the field.
       */
      fieldCls: Ext.baseCSSPrefix + 'form-display-field',
  
      fieldBodyCls: Ext.baseCSSPrefix + 'form-display-field-body',
  
      /**
       * @cfg {Boolean} htmlEncode
       * True to escape HTML in text when rendering it.
       */
      htmlEncode: false,
  
      /**
       * @cfg {Function/String} renderer
       * A function to transform the raw value for display in the field.
       *
       *     Ext.create('Ext.form.Panel', {
       *         renderTo: document.body,
       *         width: 175,
       *         bodyPadding: 10,
       *         title: 'Final Score',
       *         items: [{
       *             xtype: 'displayfield',
       *             fieldLabel: 'Grade',
       *             name: 'final_grade',
       *             value: 68,
       *             renderer: function (value, field) {
       *                 var color = (value < 70) ? 'red' : 'black';
       *                 return '<span style="color:' + color + ';">' + value + '</span>';
       *             }
       *         }]
       *     });
       *
       * @param {Object} value The raw field {@link #value}
       * @param {Ext.form.field.Display} field The display field
       * @return {String} displayValue The HTML string to be rendered
       * @controllable
       */
  
      /**
       * @cfg {Object} scope
       * The scope to execute the {@link #renderer} function. Defaults to this.
       */
  
      noWrap: false,
  
      /**
       * @cfg {Boolean} validateOnChange
       * @private
       */
      validateOnChange: false,
  
      initEvents: Ext.emptyFn,
  
      submitValue: false,
  
      getValue: function () {
          return this.value;
      },
  
      valueToRaw: function (value) {
          if (value || value === 0 || value === false) {
              return value;
          } else {
              return '';
          }
      },
  
      isDirty: function () {
          return false;
      },
  
      isValid: Ext.returnTrue,
  
      validate: Ext.returnTrue,
  
      getRawValue: function () {
          return this.rawValue;
      },
  
      setRawValue: function (value) {
          var me = this;
  
          value = Ext.valueFrom(value, '');
          me.rawValue = value;
          if (me.rendered) {
              me.inputEl.dom.innerHTML = me.getDisplayValue();
              me.updateLayout();
          }
          return value;
      },
  
      /**
       * @private
       * Format the value to display.
       */
      getDisplayValue: function () {
          var me = this,
              value = this.getRawValue(),
              renderer = me.renderer,
              display;
  
          if (renderer) {
              display = Ext.callback(renderer, me.scope, [value, me], 0, me);
          } else {
              display = me.htmlEncode ? Ext.util.Format.htmlEncode(value) : value;
          }
          return display;
      },
  
      getSubTplData: function (fieldData) {
          var ret = this.callParent(arguments);
  
          ret.value = this.getDisplayValue();
  
          return ret;
      }
  
      /**
       * @cfg {String} inputType
       * @private
       */
      /**
       * @cfg {Boolean} disabled
       * @private
       */
      /**
       * @cfg {Number} checkChangeEvents
       * @private
       */
      /**
       * @cfg {Number} checkChangeBuffer
       * @private
       */
  });
  