Display.html 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  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;',
  59. '&lt;tpl if=&quot;fieldStyle&quot;&gt; style=&quot;{fieldStyle}&quot;&lt;/tpl&gt;',
  60. ' class=&quot;{fieldCls}&quot;&gt;{value}&lt;/div&gt;',
  61. {
  62. compiled: true,
  63. disableFormats: true
  64. }
  65. ],
  66. <span id='Ext-form-field-Display-cfg-fieldCls'> /**
  67. </span> * @cfg {String} [fieldCls=&quot;x-form-display-field&quot;]
  68. * The default CSS class for the field.
  69. */
  70. fieldCls: Ext.baseCSSPrefix + 'form-display-field',
  71. <span id='Ext-form-field-Display-cfg-htmlEncode'> /**
  72. </span> * @cfg {Boolean} htmlEncode
  73. * True to escape HTML in text when rendering it.
  74. */
  75. htmlEncode: false,
  76. <span id='Ext-form-field-Display-cfg-renderer'> /**
  77. </span> * @cfg {Function} renderer
  78. * A function to transform the raw value for display in the field. The function will receive 2 arguments, the raw value
  79. * and the {@link Ext.form.field.Display} object.
  80. */
  81. <span id='Ext-form-field-Display-cfg-scope'> /**
  82. </span> * @cfg {Object} scope
  83. * The scope to execute the {@link #renderer} function. Defaults to this.
  84. */
  85. validateOnChange: false,
  86. initEvents: Ext.emptyFn,
  87. submitValue: false,
  88. isDirty: function(){
  89. return false;
  90. },
  91. isValid: function() {
  92. return true;
  93. },
  94. validate: function() {
  95. return true;
  96. },
  97. getRawValue: function() {
  98. return this.rawValue;
  99. },
  100. setRawValue: function(value) {
  101. var me = this,
  102. display;
  103. value = Ext.value(value, '');
  104. me.rawValue = value;
  105. if (me.rendered) {
  106. me.inputEl.dom.innerHTML = me.getDisplayValue();
  107. me.updateLayout();
  108. }
  109. return value;
  110. },
  111. <span id='Ext-form-field-Display-method-getDisplayValue'> /**
  112. </span> * @private
  113. * Format the value to display.
  114. */
  115. getDisplayValue: function() {
  116. var me = this,
  117. value = this.getRawValue(),
  118. display;
  119. if (me.renderer) {
  120. display = me.renderer.call(me.scope || me, value, me);
  121. } else {
  122. display = me.htmlEncode ? Ext.util.Format.htmlEncode(value) : value;
  123. }
  124. return display;
  125. },
  126. getSubTplData: function() {
  127. var ret = this.callParent(arguments);
  128. ret.value = this.getDisplayValue();
  129. return ret;
  130. }
  131. <span id='Ext-form-field-Display-cfg-inputType'> /**
  132. </span> * @cfg {String} inputType
  133. * @private
  134. */
  135. <span id='Ext-form-field-Display-cfg-disabled'> /**
  136. </span> * @cfg {Boolean} disabled
  137. * @private
  138. */
  139. <span id='Ext-form-field-Display-cfg-readOnly'> /**
  140. </span> * @cfg {Boolean} readOnly
  141. * @private
  142. */
  143. <span id='Ext-form-field-Display-cfg-validateOnChange'> /**
  144. </span> * @cfg {Boolean} validateOnChange
  145. * @private
  146. */
  147. <span id='Ext-form-field-Display-cfg-checkChangeEvents'> /**
  148. </span> * @cfg {Number} checkChangeEvents
  149. * @private
  150. */
  151. <span id='Ext-form-field-Display-cfg-checkChangeBuffer'> /**
  152. </span> * @cfg {Number} checkChangeBuffer
  153. * @private
  154. */
  155. });
  156. </pre>
  157. </body>
  158. </html>