bc327375981e6509762bf741f8dbd815661989d4.svn-base 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. /*
  2. * Ext JS Library 2.0 Copyright(c) 2006-2007, Ext JS, LLC. licensing@extjs.com
  3. *
  4. * http://extjs.com/license
  5. */
  6. /**
  7. * @class Ext.form.TextArea
  8. * @extends Ext.form.TextField Multiline text field. Can be used as a direct
  9. * replacement for traditional textarea fields, plus adds support for
  10. * auto-sizing.
  11. * @constructor Creates a new TextArea
  12. * @param {Object}
  13. * config Configuration options
  14. */
  15. Ext.form.TextArea = Ext.extend(Ext.form.TextField, {
  16. /**
  17. * @cfg {Number} growMin The minimum height to allow when grow =
  18. * true (defaults to 60)
  19. */
  20. growMin : 60,
  21. /**
  22. * @cfg {Number} growMax The maximum height to allow when grow =
  23. * true (defaults to 1000)
  24. */
  25. growMax : 1000,
  26. growAppend : ' \n ',
  27. growPad : 0,
  28. enterIsSpecial : false,
  29. /**
  30. * @cfg {Boolean} preventScrollbars True to prevent scrollbars from
  31. * appearing regardless of how much text is in the field
  32. * (equivalent to setting overflow: hidden, defaults to false)
  33. */
  34. preventScrollbars : false,
  35. /**
  36. * @cfg {String/Object} autoCreate A DomHelper element spec, or true
  37. * for a default element spec (defaults to {tag: "textarea",
  38. * style: "width:100px;height:60px;", autocomplete: "off"})
  39. */
  40. // private
  41. onRender : function(ct, position) {
  42. if (!this.el) {
  43. this.defaultAutoCreate = {
  44. tag : "textarea",
  45. style : "width:100px;height:60px;",
  46. autocomplete : "off"
  47. };
  48. }
  49. Ext.form.TextArea.superclass.onRender.call(this, ct, position);
  50. if (this.grow) {
  51. this.textSizeEl = Ext.DomHelper.append(document.body, {
  52. tag : "pre",
  53. cls : "x-form-grow-sizer"
  54. });
  55. if (this.preventScrollbars) {
  56. this.el.setStyle("overflow", "hidden");
  57. }
  58. this.el.setHeight(this.growMin);
  59. }
  60. },
  61. onDestroy : function() {
  62. if (this.textSizeEl) {
  63. Ext.removeNode(this.textSizeEl);
  64. }
  65. Ext.form.TextArea.superclass.onDestroy.call(this);
  66. },
  67. fireKey : function(e) {
  68. if (e.isSpecialKey()
  69. && (this.enterIsSpecial || (e.getKey() != e.ENTER || e
  70. .hasModifier()))) {
  71. this.fireEvent("specialkey", this, e);
  72. }
  73. },
  74. // private
  75. onKeyUp : function(e) {
  76. if (!e.isNavKeyPress() || e.getKey() == e.ENTER) {
  77. this.autoSize();
  78. }
  79. },
  80. /**
  81. * Automatically grows the field to accomodate the height of the
  82. * text up to the maximum field height allowed. This only takes
  83. * effect if grow = true, and fires the autosize event if the height
  84. * changes.
  85. */
  86. autoSize : function() {
  87. if (!this.grow || !this.textSizeEl) {
  88. return;
  89. }
  90. var el = this.el;
  91. var v = el.dom.value;
  92. var ts = this.textSizeEl;
  93. ts.innerHTML = '';
  94. ts.appendChild(document.createTextNode(v));
  95. v = ts.innerHTML;
  96. Ext.fly(ts).setWidth(this.el.getWidth());
  97. if (v.length < 1) {
  98. v = "&#160;&#160;";
  99. } else {
  100. if (Ext.isIE) {
  101. v = v.replace(/\n/g, '<p>&#160;</p>');
  102. }
  103. v += this.growAppend;
  104. }
  105. ts.innerHTML = v;
  106. var h = Math.min(this.growMax, Math.max(ts.offsetHeight,
  107. this.growMin)
  108. + this.growPad);
  109. if (h != this.lastHeight) {
  110. this.lastHeight = h;
  111. this.el.setHeight(h);
  112. this.fireEvent("autosize", this, h);
  113. }
  114. }
  115. });
  116. Ext.reg('textarea', Ext.form.TextArea);