StaticTextField.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. /**
  2. * @class Ext.ux.form.StaticTextField
  3. * @extends Ext.BoxComponent
  4. * Base class to easily display static text in a form layout.
  5. * @constructor
  6. * Creates a new StaticTextField Field
  7. * @param {Object} config Configuration options
  8. * @author Based on MiscField by Nullity with modifications by Aparajita Fishman
  9. */
  10. Ext.namespace('Ext.ux.form');
  11. Ext.ux.form.StaticTextField = function(config){
  12. this.name = config.name || config.id;
  13. Ext.ux.form.StaticTextField.superclass.constructor.call(this, config);
  14. };
  15. Ext.extend(Ext.ux.form.StaticTextField, Ext.BoxComponent, {
  16. /**
  17. * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
  18. * {tag: "div"})
  19. */
  20. defaultAutoCreate : {tag: "div"},
  21. /**
  22. * @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-field")
  23. */
  24. fieldClass : "x-form-text",
  25. // private
  26. isFormField : true,
  27. /**
  28. * @cfg {Boolean} postValue True to create a hidden field that will post the field's value during a submit
  29. */
  30. submitValue : false,
  31. /**
  32. * @cfg {Mixed} value A value to initialize this field with.
  33. */
  34. value : undefined,
  35. /**
  36. * @cfg {Boolean} disableReset True to prevent this field from being reset when calling Ext.form.Form.reset()
  37. */
  38. disableReset: false,
  39. // private
  40. field: null,
  41. /**
  42. * Returns the name attribute of the field if available
  43. * @return {String} name The field name
  44. */
  45. getName: function(){
  46. return this.name;
  47. },
  48. // private
  49. onRender : function(ct, position){
  50. Ext.ux.form.StaticTextField.superclass.onRender.call(this, ct, position);
  51. if(!this.el){
  52. var cfg = this.getAutoCreate();
  53. this.el = ct.createChild(cfg, position);
  54. if (this.submitValue) {
  55. this.field = ct.createChild({tag:'input', type:'hidden', name: this.getName(), id: ''}, position);
  56. }
  57. }
  58. this.el.addClass([this.fieldClass, this.cls, 'ux-form-statictextfield']);
  59. this.initValue();
  60. },
  61. // private
  62. afterRender : function(ct, position){
  63. Ext.ux.form.StaticTextField.superclass.afterRender.call(this);
  64. this.initEvents();
  65. },
  66. // private
  67. initValue : function(){
  68. if(this.value !== undefined){
  69. this.setValue(this.value);
  70. }else if(this.el.dom.innerHTML.length > 0){
  71. this.setValue(this.el.dom.innerHTML);
  72. }
  73. },
  74. /**
  75. * Returns true if this field has been changed since it was originally loaded.
  76. */
  77. isDirty : function() {
  78. return false;
  79. },
  80. /**
  81. * Resets the current field value to the originally-loaded value
  82. * @param {Boolean} force Force a reset even if the option disableReset is true
  83. */
  84. reset : function(force){
  85. if(!this.disableReset || force === true){
  86. this.setValue(this.originalValue);
  87. }
  88. },
  89. // private
  90. initEvents : function(){
  91. // reference to original value for reset
  92. this.originalValue = this.getRawValue();
  93. },
  94. /**
  95. * Returns whether or not the field value is currently valid
  96. * Always returns true, not used in StaticTextField.
  97. * @return {Boolean} True
  98. */
  99. isValid : function(){
  100. return true;
  101. },
  102. /**
  103. * Validates the field value
  104. * Always returns true, not used in StaticTextField. Required for Ext.form.Form.isValid()
  105. * @return {Boolean} True
  106. */
  107. validate : function(){
  108. return true;
  109. },
  110. processValue : function(value){
  111. return value;
  112. },
  113. // private
  114. // Subclasses should provide the validation implementation by overriding this
  115. validateValue : function(value){
  116. return true;
  117. },
  118. /**
  119. * Mark this field as invalid
  120. * Not used in StaticTextField. Required for Ext.form.Form.markInvalid()
  121. */
  122. markInvalid : function(){
  123. return;
  124. },
  125. /**
  126. * Clear any invalid styles/messages for this field
  127. * Not used in StaticTextField. Required for Ext.form.Form.clearInvalid()
  128. */
  129. clearInvalid : function(){
  130. return;
  131. },
  132. /**
  133. * Returns the raw field value.
  134. * @return {Mixed} value The field value
  135. */
  136. getRawValue : function(){
  137. return (this.rendered) ? this.value : null;
  138. },
  139. /**
  140. * Returns the clean field value.
  141. * @return {String} value The field value
  142. */
  143. getValue : function(){
  144. return this.getRawValue();
  145. },
  146. /**
  147. * Sets the raw field value. The display text is <strong>not</strong> HTML encoded.
  148. * @param {Mixed} value The value to set
  149. */
  150. setRawValue : function(v){
  151. this.value = v;
  152. if(this.rendered){
  153. this.el.dom.innerHTML = v;
  154. if(this.field){
  155. this.field.dom.value = v;
  156. }
  157. }
  158. },
  159. /**
  160. * Sets the field value. The display text is HTML encoded.
  161. * @param {Mixed} value The value to set
  162. */
  163. setValue : function(v){
  164. this.value = v;
  165. if(this.rendered){
  166. this.el.dom.innerHTML = Ext.util.Format.htmlEncode(v);
  167. if(this.field){
  168. this.field.dom.value = v;
  169. }
  170. }
  171. }
  172. });
  173. Ext.reg('statictextfield', Ext.ux.form.StaticTextField);