Text3.html 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774
  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-Text'>/**
  19. </span> * @docauthor Jason Johnston &lt;jason@sencha.com&gt;
  20. *
  21. * A basic text field. Can be used as a direct replacement for traditional text inputs,
  22. * or as the base class for more sophisticated input controls (like {@link Ext.form.field.TextArea}
  23. * and {@link Ext.form.field.ComboBox}). Has support for empty-field placeholder values (see {@link #emptyText}).
  24. *
  25. * # Validation
  26. *
  27. * The Text field has a useful set of validations built in:
  28. *
  29. * - {@link #allowBlank} for making the field required
  30. * - {@link #minLength} for requiring a minimum value length
  31. * - {@link #maxLength} for setting a maximum value length (with {@link #enforceMaxLength} to add it
  32. * as the `maxlength` attribute on the input element)
  33. * - {@link #regex} to specify a custom regular expression for validation
  34. *
  35. * In addition, custom validations may be added:
  36. *
  37. * - {@link #vtype} specifies a virtual type implementation from {@link Ext.form.field.VTypes} which can contain
  38. * custom validation logic
  39. * - {@link #validator} allows a custom arbitrary function to be called during validation
  40. *
  41. * The details around how and when each of these validation options get used are described in the
  42. * documentation for {@link #getErrors}.
  43. *
  44. * By default, the field value is checked for validity immediately while the user is typing in the
  45. * field. This can be controlled with the {@link #validateOnChange}, {@link #checkChangeEvents}, and
  46. * {@link #checkChangeBuffer} configurations. Also see the details on Form Validation in the
  47. * {@link Ext.form.Panel} class documentation.
  48. *
  49. * # Masking and Character Stripping
  50. *
  51. * Text fields can be configured with custom regular expressions to be applied to entered values before
  52. * validation: see {@link #maskRe} and {@link #stripCharsRe} for details.
  53. *
  54. * # Example usage
  55. *
  56. * @example
  57. * Ext.create('Ext.form.Panel', {
  58. * title: 'Contact Info',
  59. * width: 300,
  60. * bodyPadding: 10,
  61. * renderTo: Ext.getBody(),
  62. * items: [{
  63. * xtype: 'textfield',
  64. * name: 'name',
  65. * fieldLabel: 'Name',
  66. * allowBlank: false // requires a non-empty value
  67. * }, {
  68. * xtype: 'textfield',
  69. * name: 'email',
  70. * fieldLabel: 'Email Address',
  71. * vtype: 'email' // requires value to be a valid email address format
  72. * }]
  73. * });
  74. */
  75. Ext.define('Ext.form.field.Text', {
  76. extend:'Ext.form.field.Base',
  77. alias: 'widget.textfield',
  78. requires: ['Ext.form.field.VTypes', 'Ext.layout.component.field.Text'],
  79. alternateClassName: ['Ext.form.TextField', 'Ext.form.Text'],
  80. <span id='Ext-form-field-Text-cfg-vtypeText'> /**
  81. </span> * @cfg {String} vtypeText
  82. * A custom error message to display in place of the default message provided for the **`{@link #vtype}`** currently
  83. * set for this field. **Note**: only applies if **`{@link #vtype}`** is set, else ignored.
  84. */
  85. <span id='Ext-form-field-Text-cfg-stripCharsRe'> /**
  86. </span> * @cfg {RegExp} stripCharsRe
  87. * A JavaScript RegExp object used to strip unwanted content from the value
  88. * during input. If `stripCharsRe` is specified,
  89. * every *character sequence* matching `stripCharsRe` will be removed.
  90. */
  91. <span id='Ext-form-field-Text-cfg-size'> /**
  92. </span> * @cfg {Number} size
  93. * An initial value for the 'size' attribute on the text input element. This is only used if the field has no
  94. * configured {@link #width} and is not given a width by its container's layout. Defaults to 20.
  95. */
  96. size: 20,
  97. <span id='Ext-form-field-Text-cfg-grow'> /**
  98. </span> * @cfg {Boolean} [grow=false]
  99. * true if this field should automatically grow and shrink to its content
  100. */
  101. <span id='Ext-form-field-Text-cfg-growMin'> /**
  102. </span> * @cfg {Number} growMin
  103. * The minimum width to allow when `{@link #grow} = true`
  104. */
  105. growMin : 30,
  106. <span id='Ext-form-field-Text-cfg-growMax'> /**
  107. </span> * @cfg {Number} growMax
  108. * The maximum width to allow when `{@link #grow} = true`
  109. */
  110. growMax : 800,
  111. //&lt;locale&gt;
  112. <span id='Ext-form-field-Text-cfg-growAppend'> /**
  113. </span> * @cfg {String} growAppend
  114. * A string that will be appended to the field's current value for the purposes of calculating the target field
  115. * size. Only used when the {@link #grow} config is true. Defaults to a single capital &quot;W&quot; (the widest character in
  116. * common fonts) to leave enough space for the next typed character and avoid the field value shifting before the
  117. * width is adjusted.
  118. */
  119. growAppend: 'W',
  120. //&lt;/locale&gt;
  121. <span id='Ext-form-field-Text-cfg-vtype'> /**
  122. </span> * @cfg {String} vtype
  123. * A validation type name as defined in {@link Ext.form.field.VTypes}
  124. */
  125. <span id='Ext-form-field-Text-cfg-maskRe'> /**
  126. </span> * @cfg {RegExp} maskRe An input mask regular expression that will be used to filter keystrokes (character being
  127. * typed) that do not match.
  128. * Note: It does not filter characters already in the input.
  129. */
  130. <span id='Ext-form-field-Text-cfg-disableKeyFilter'> /**
  131. </span> * @cfg {Boolean} [disableKeyFilter=false]
  132. * Specify true to disable input keystroke filtering
  133. */
  134. <span id='Ext-form-field-Text-cfg-allowBlank'> /**
  135. </span> * @cfg {Boolean} allowBlank
  136. * Specify false to validate that the value's length is &gt; 0
  137. */
  138. allowBlank : true,
  139. <span id='Ext-form-field-Text-cfg-minLength'> /**
  140. </span> * @cfg {Number} minLength
  141. * Minimum input field length required
  142. */
  143. minLength : 0,
  144. <span id='Ext-form-field-Text-cfg-maxLength'> /**
  145. </span> * @cfg {Number} maxLength
  146. * Maximum input field length allowed by validation. This behavior is intended to
  147. * provide instant feedback to the user by improving usability to allow pasting and editing or overtyping and back
  148. * tracking. To restrict the maximum number of characters that can be entered into the field use the
  149. * **{@link Ext.form.field.Text#enforceMaxLength enforceMaxLength}** option.
  150. *
  151. * Defaults to Number.MAX_VALUE.
  152. */
  153. maxLength : Number.MAX_VALUE,
  154. <span id='Ext-form-field-Text-cfg-enforceMaxLength'> /**
  155. </span> * @cfg {Boolean} enforceMaxLength
  156. * True to set the maxLength property on the underlying input field. Defaults to false
  157. */
  158. <span id='Ext-form-field-Text-cfg-minLengthText'> /**
  159. </span> * @cfg {String} minLengthText
  160. * Error text to display if the **{@link #minLength minimum length}** validation fails.
  161. */
  162. //&lt;locale&gt;
  163. minLengthText : 'The minimum length for this field is {0}',
  164. //&lt;/locale&gt;
  165. //&lt;locale&gt;
  166. <span id='Ext-form-field-Text-cfg-maxLengthText'> /**
  167. </span> * @cfg {String} maxLengthText
  168. * Error text to display if the **{@link #maxLength maximum length}** validation fails
  169. */
  170. maxLengthText : 'The maximum length for this field is {0}',
  171. //&lt;/locale&gt;
  172. <span id='Ext-form-field-Text-cfg-selectOnFocus'> /**
  173. </span> * @cfg {Boolean} [selectOnFocus=false]
  174. * true to automatically select any existing field text when the field receives input focus
  175. */
  176. //&lt;locale&gt;
  177. <span id='Ext-form-field-Text-cfg-blankText'> /**
  178. </span> * @cfg {String} blankText
  179. * The error text to display if the **{@link #allowBlank}** validation fails
  180. */
  181. blankText : 'This field is required',
  182. //&lt;/locale&gt;
  183. <span id='Ext-form-field-Text-cfg-validator'> /**
  184. </span> * @cfg {Function} validator
  185. * A custom validation function to be called during field validation ({@link #getErrors}).
  186. * If specified, this function will be called first, allowing the developer to override the default validation
  187. * process.
  188. *
  189. * This function will be passed the following parameters:
  190. *
  191. * @cfg {Object} validator.value The current field value
  192. * @cfg {Boolean/String} validator.return
  193. *
  194. * - True if the value is valid
  195. * - An error message if the value is invalid
  196. */
  197. <span id='Ext-form-field-Text-cfg-regex'> /**
  198. </span> * @cfg {RegExp} regex
  199. * A JavaScript RegExp object to be tested against the field value during validation.
  200. * If the test fails, the field will be marked invalid using
  201. * either **{@link #regexText}** or **{@link #invalidText}**.
  202. */
  203. <span id='Ext-form-field-Text-cfg-regexText'> /**
  204. </span> * @cfg {String} regexText
  205. * The error text to display if **{@link #regex}** is used and the test fails during validation
  206. */
  207. regexText : '',
  208. <span id='Ext-form-field-Text-cfg-emptyText'> /**
  209. </span> * @cfg {String} emptyText
  210. * The default text to place into an empty field.
  211. *
  212. * Note that normally this value will be submitted to the server if this field is enabled; to prevent this you can
  213. * set the {@link Ext.form.action.Action#submitEmptyText submitEmptyText} option of {@link Ext.form.Basic#submit} to
  214. * false.
  215. *
  216. * Also note that if you use {@link #inputType inputType}:'file', {@link #emptyText} is not supported and should be
  217. * avoided.
  218. *
  219. * Note that for browsers that support it, setting this property will use the HTML 5 placeholder attribute, and for
  220. * older browsers that don't support the HTML 5 placeholder attribute the value will be placed directly into the input
  221. * element itself as the raw value. This means that older browsers will obfuscate the {@link #emptyText} value for
  222. * password input fields.
  223. */
  224. <span id='Ext-form-field-Text-cfg-emptyCls'> /**
  225. </span> * @cfg {String} [emptyCls='x-form-empty-field']
  226. * The CSS class to apply to an empty field to style the **{@link #emptyText}**.
  227. * This class is automatically added and removed as needed depending on the current field value.
  228. */
  229. emptyCls : Ext.baseCSSPrefix + 'form-empty-field',
  230. <span id='Ext-form-field-Text-cfg-requiredCls'> /**
  231. </span> * @cfg {String} [requiredCls='x-form-required-field']
  232. * The CSS class to apply to a required field, i.e. a field where **{@link #allowBlank}** is false.
  233. */
  234. requiredCls : Ext.baseCSSPrefix + 'form-required-field',
  235. <span id='Ext-form-field-Text-cfg-enableKeyEvents'> /**
  236. </span> * @cfg {Boolean} [enableKeyEvents=false]
  237. * true to enable the proxying of key events for the HTML input field
  238. */
  239. componentLayout: 'textfield',
  240. // private
  241. valueContainsPlaceholder : false,
  242. initComponent: function () {
  243. var me = this;
  244. me.callParent();
  245. me.addEvents(
  246. <span id='Ext-form-field-Text-event-autosize'> /**
  247. </span> * @event autosize
  248. * Fires when the **{@link #autoSize}** function is triggered and the field is resized according to the
  249. * {@link #grow}/{@link #growMin}/{@link #growMax} configs as a result. This event provides a hook for the
  250. * developer to apply additional logic at runtime to resize the field if needed.
  251. * @param {Ext.form.field.Text} this This text field
  252. * @param {Number} width The new field width
  253. */
  254. 'autosize',
  255. <span id='Ext-form-field-Text-event-keydown'> /**
  256. </span> * @event keydown
  257. * Keydown input field event. This event only fires if **{@link #enableKeyEvents}** is set to true.
  258. * @param {Ext.form.field.Text} this This text field
  259. * @param {Ext.EventObject} e
  260. */
  261. 'keydown',
  262. <span id='Ext-form-field-Text-event-keyup'> /**
  263. </span> * @event keyup
  264. * Keyup input field event. This event only fires if **{@link #enableKeyEvents}** is set to true.
  265. * @param {Ext.form.field.Text} this This text field
  266. * @param {Ext.EventObject} e
  267. */
  268. 'keyup',
  269. <span id='Ext-form-field-Text-event-keypress'> /**
  270. </span> * @event keypress
  271. * Keypress input field event. This event only fires if **{@link #enableKeyEvents}** is set to true.
  272. * @param {Ext.form.field.Text} this This text field
  273. * @param {Ext.EventObject} e
  274. */
  275. 'keypress'
  276. );
  277. me.addStateEvents('change');
  278. me.setGrowSizePolicy();
  279. },
  280. // private
  281. setGrowSizePolicy: function(){
  282. if (this.grow) {
  283. this.shrinkWrap |= 1; // width must shrinkWrap
  284. }
  285. },
  286. // private
  287. initEvents : function(){
  288. var me = this,
  289. el = me.inputEl;
  290. me.callParent();
  291. if(me.selectOnFocus || me.emptyText){
  292. me.mon(el, 'mousedown', me.onMouseDown, me);
  293. }
  294. if(me.maskRe || (me.vtype &amp;&amp; me.disableKeyFilter !== true &amp;&amp; (me.maskRe = Ext.form.field.VTypes[me.vtype+'Mask']))){
  295. me.mon(el, 'keypress', me.filterKeys, me);
  296. }
  297. if (me.enableKeyEvents) {
  298. me.mon(el, {
  299. scope: me,
  300. keyup: me.onKeyUp,
  301. keydown: me.onKeyDown,
  302. keypress: me.onKeyPress
  303. });
  304. }
  305. },
  306. <span id='Ext-form-field-Text-method-isEqual'> /**
  307. </span> * @private
  308. * Override. Treat undefined and null values as equal to an empty string value.
  309. */
  310. isEqual: function(value1, value2) {
  311. return this.isEqualAsString(value1, value2);
  312. },
  313. <span id='Ext-form-field-Text-method-onChange'> /**
  314. </span> * @private
  315. * If grow=true, invoke the autoSize method when the field's value is changed.
  316. */
  317. onChange: function() {
  318. this.callParent();
  319. this.autoSize();
  320. },
  321. getSubTplData: function() {
  322. var me = this,
  323. value = me.getRawValue(),
  324. isEmpty = me.emptyText &amp;&amp; value.length &lt; 1,
  325. maxLength = me.maxLength,
  326. placeholder;
  327. // We can't just dump the value here, since MAX_VALUE ends up
  328. // being something like 1.xxxxe+300, which gets interpreted as 1
  329. // in the markup
  330. if (me.enforceMaxLength) {
  331. if (maxLength === Number.MAX_VALUE) {
  332. maxLength = undefined;
  333. }
  334. } else {
  335. maxLength = undefined;
  336. }
  337. if (isEmpty) {
  338. if (Ext.supports.Placeholder) {
  339. placeholder = me.emptyText;
  340. } else {
  341. value = me.emptyText;
  342. me.valueContainsPlaceholder = true;
  343. }
  344. }
  345. return Ext.apply(me.callParent(), {
  346. maxLength : maxLength,
  347. readOnly : me.readOnly,
  348. placeholder : placeholder,
  349. value : value,
  350. fieldCls : me.fieldCls + ((isEmpty &amp;&amp; (placeholder || value)) ? ' ' + me.emptyCls : '') + (me.allowBlank ? '' : ' ' + me.requiredCls)
  351. });
  352. },
  353. afterRender: function(){
  354. this.autoSize();
  355. this.callParent();
  356. },
  357. onMouseDown: function(e){
  358. var me = this;
  359. if(!me.hasFocus){
  360. me.mon(me.inputEl, 'mouseup', Ext.emptyFn, me, { single: true, preventDefault: true });
  361. }
  362. },
  363. <span id='Ext-form-field-Text-method-processRawValue'> /**
  364. </span> * Performs any necessary manipulation of a raw String value to prepare it for conversion and/or
  365. * {@link #validate validation}. For text fields this applies the configured {@link #stripCharsRe}
  366. * to the raw value.
  367. * @param {String} value The unprocessed string value
  368. * @return {String} The processed string value
  369. */
  370. processRawValue: function(value) {
  371. var me = this,
  372. stripRe = me.stripCharsRe,
  373. newValue;
  374. if (stripRe) {
  375. newValue = value.replace(stripRe, '');
  376. if (newValue !== value) {
  377. me.setRawValue(newValue);
  378. value = newValue;
  379. }
  380. }
  381. return value;
  382. },
  383. //private
  384. onDisable: function(){
  385. this.callParent();
  386. if (Ext.isIE) {
  387. this.inputEl.dom.unselectable = 'on';
  388. }
  389. },
  390. //private
  391. onEnable: function(){
  392. this.callParent();
  393. if (Ext.isIE) {
  394. this.inputEl.dom.unselectable = '';
  395. }
  396. },
  397. onKeyDown: function(e) {
  398. this.fireEvent('keydown', this, e);
  399. },
  400. onKeyUp: function(e) {
  401. this.fireEvent('keyup', this, e);
  402. },
  403. onKeyPress: function(e) {
  404. this.fireEvent('keypress', this, e);
  405. },
  406. <span id='Ext-form-field-Text-method-reset'> /**
  407. </span> * Resets the current field value to the originally-loaded value and clears any validation messages.
  408. * Also adds **{@link #emptyText}** and **{@link #emptyCls}** if the original value was blank.
  409. */
  410. reset : function(){
  411. this.callParent();
  412. this.applyEmptyText();
  413. },
  414. applyEmptyText : function(){
  415. var me = this,
  416. emptyText = me.emptyText,
  417. isEmpty;
  418. if (me.rendered &amp;&amp; emptyText) {
  419. isEmpty = me.getRawValue().length &lt; 1 &amp;&amp; !me.hasFocus;
  420. if (Ext.supports.Placeholder) {
  421. me.inputEl.dom.placeholder = emptyText;
  422. } else if (isEmpty) {
  423. me.setRawValue(emptyText);
  424. me.valueContainsPlaceholder = true;
  425. }
  426. //all browsers need this because of a styling issue with chrome + placeholders.
  427. //the text isnt vertically aligned when empty (and using the placeholder)
  428. if (isEmpty) {
  429. me.inputEl.addCls(me.emptyCls);
  430. }
  431. me.autoSize();
  432. }
  433. },
  434. afterFirstLayout: function() {
  435. this.callParent();
  436. if (Ext.isIE &amp;&amp; this.disabled) {
  437. var el = this.inputEl;
  438. if (el) {
  439. el.dom.unselectable = 'on';
  440. }
  441. }
  442. },
  443. // private
  444. preFocus : function(){
  445. var me = this,
  446. inputEl = me.inputEl,
  447. emptyText = me.emptyText,
  448. isEmpty;
  449. me.callParent(arguments);
  450. if ((emptyText &amp;&amp; !Ext.supports.Placeholder) &amp;&amp; (inputEl.dom.value === me.emptyText &amp;&amp; me.valueContainsPlaceholder)) {
  451. me.setRawValue('');
  452. isEmpty = true;
  453. inputEl.removeCls(me.emptyCls);
  454. me.valueContainsPlaceholder = false;
  455. } else if (Ext.supports.Placeholder) {
  456. me.inputEl.removeCls(me.emptyCls);
  457. }
  458. if (me.selectOnFocus || isEmpty) {
  459. inputEl.dom.select();
  460. }
  461. },
  462. onFocus: function() {
  463. var me = this;
  464. me.callParent(arguments);
  465. if (me.emptyText) {
  466. me.autoSize();
  467. }
  468. },
  469. // private
  470. postBlur : function(){
  471. this.callParent(arguments);
  472. this.applyEmptyText();
  473. },
  474. // private
  475. filterKeys : function(e){
  476. /*
  477. * On European keyboards, the right alt key, Alt Gr, is used to type certain special characters.
  478. * JS detects a keypress of this as ctrlKey &amp; altKey. As such, we check that alt isn't pressed
  479. * so we can still process these special characters.
  480. */
  481. if (e.ctrlKey &amp;&amp; !e.altKey) {
  482. return;
  483. }
  484. var key = e.getKey(),
  485. charCode = String.fromCharCode(e.getCharCode());
  486. if((Ext.isGecko || Ext.isOpera) &amp;&amp; (e.isNavKeyPress() || key === e.BACKSPACE || (key === e.DELETE &amp;&amp; e.button === -1))){
  487. return;
  488. }
  489. if((!Ext.isGecko &amp;&amp; !Ext.isOpera) &amp;&amp; e.isSpecialKey() &amp;&amp; !charCode){
  490. return;
  491. }
  492. if(!this.maskRe.test(charCode)){
  493. e.stopEvent();
  494. }
  495. },
  496. getState: function() {
  497. return this.addPropertyToState(this.callParent(), 'value');
  498. },
  499. applyState: function(state) {
  500. this.callParent(arguments);
  501. if(state.hasOwnProperty('value')) {
  502. this.setValue(state.value);
  503. }
  504. },
  505. <span id='Ext-form-field-Text-method-getRawValue'> /**
  506. </span> * Returns the raw String value of the field, without performing any normalization, conversion, or validation. Gets
  507. * the current value of the input element if the field has been rendered, ignoring the value if it is the
  508. * {@link #emptyText}. To get a normalized and converted value see {@link #getValue}.
  509. * @return {String} The raw String value of the field
  510. */
  511. getRawValue: function() {
  512. var me = this,
  513. v = me.callParent();
  514. if (v === me.emptyText &amp;&amp; me.valueContainsPlaceholder) {
  515. v = '';
  516. }
  517. return v;
  518. },
  519. <span id='Ext-form-field-Text-method-setValue'> /**
  520. </span> * Sets a data value into the field and runs the change detection and validation. Also applies any configured
  521. * {@link #emptyText} for text fields. To set the value directly without these inspections see {@link #setRawValue}.
  522. * @param {Object} value The value to set
  523. * @return {Ext.form.field.Text} this
  524. */
  525. setValue: function(value) {
  526. var me = this,
  527. inputEl = me.inputEl;
  528. if (inputEl &amp;&amp; me.emptyText &amp;&amp; !Ext.isEmpty(value)) {
  529. inputEl.removeCls(me.emptyCls);
  530. me.valueContainsPlaceholder = false;
  531. }
  532. me.callParent(arguments);
  533. me.applyEmptyText();
  534. return me;
  535. },
  536. <span id='Ext-form-field-Text-method-getErrors'> /**
  537. </span> * Validates a value according to the field's validation rules and returns an array of errors
  538. * for any failing validations. Validation rules are processed in the following order:
  539. *
  540. * 1. **Field specific validator**
  541. *
  542. * A validator offers a way to customize and reuse a validation specification.
  543. * If a field is configured with a `{@link #validator}`
  544. * function, it will be passed the current field value. The `{@link #validator}`
  545. * function is expected to return either:
  546. *
  547. * - Boolean `true` if the value is valid (validation continues).
  548. * - a String to represent the invalid message if invalid (validation halts).
  549. *
  550. * 2. **Basic Validation**
  551. *
  552. * If the `{@link #validator}` has not halted validation,
  553. * basic validation proceeds as follows:
  554. *
  555. * - `{@link #allowBlank}` : (Invalid message = `{@link #blankText}`)
  556. *
  557. * Depending on the configuration of `{@link #allowBlank}`, a
  558. * blank field will cause validation to halt at this step and return
  559. * Boolean true or false accordingly.
  560. *
  561. * - `{@link #minLength}` : (Invalid message = `{@link #minLengthText}`)
  562. *
  563. * If the passed value does not satisfy the `{@link #minLength}`
  564. * specified, validation halts.
  565. *
  566. * - `{@link #maxLength}` : (Invalid message = `{@link #maxLengthText}`)
  567. *
  568. * If the passed value does not satisfy the `{@link #maxLength}`
  569. * specified, validation halts.
  570. *
  571. * 3. **Preconfigured Validation Types (VTypes)**
  572. *
  573. * If none of the prior validation steps halts validation, a field
  574. * configured with a `{@link #vtype}` will utilize the
  575. * corresponding {@link Ext.form.field.VTypes VTypes} validation function.
  576. * If invalid, either the field's `{@link #vtypeText}` or
  577. * the VTypes vtype Text property will be used for the invalid message.
  578. * Keystrokes on the field will be filtered according to the VTypes
  579. * vtype Mask property.
  580. *
  581. * 4. **Field specific regex test**
  582. *
  583. * If none of the prior validation steps halts validation, a field's
  584. * configured `{@link #regex}` test will be processed.
  585. * The invalid message for this test is configured with `{@link #regexText}`
  586. *
  587. * @param {Object} value The value to validate. The processed raw value will be used if nothing is passed.
  588. * @return {String[]} Array of any validation errors
  589. */
  590. getErrors: function(value) {
  591. var me = this,
  592. errors = me.callParent(arguments),
  593. validator = me.validator,
  594. emptyText = me.emptyText,
  595. allowBlank = me.allowBlank,
  596. vtype = me.vtype,
  597. vtypes = Ext.form.field.VTypes,
  598. regex = me.regex,
  599. format = Ext.String.format,
  600. msg;
  601. value = value || me.processRawValue(me.getRawValue());
  602. if (Ext.isFunction(validator)) {
  603. msg = validator.call(me, value);
  604. if (msg !== true) {
  605. errors.push(msg);
  606. }
  607. }
  608. if (value.length &lt; 1 || (value === me.emptyText &amp;&amp; me.valueContainsPlaceholder)) {
  609. if (!allowBlank) {
  610. errors.push(me.blankText);
  611. }
  612. //if value is blank, there cannot be any additional errors
  613. return errors;
  614. }
  615. if (value.length &lt; me.minLength) {
  616. errors.push(format(me.minLengthText, me.minLength));
  617. }
  618. if (value.length &gt; me.maxLength) {
  619. errors.push(format(me.maxLengthText, me.maxLength));
  620. }
  621. if (vtype) {
  622. if(!vtypes[vtype](value, me)){
  623. errors.push(me.vtypeText || vtypes[vtype +'Text']);
  624. }
  625. }
  626. if (regex &amp;&amp; !regex.test(value)) {
  627. errors.push(me.regexText || me.invalidText);
  628. }
  629. return errors;
  630. },
  631. <span id='Ext-form-field-Text-method-selectText'> /**
  632. </span> * Selects text in this field
  633. * @param {Number} [start=0] The index where the selection should start
  634. * @param {Number} [end] The index where the selection should end (defaults to the text length)
  635. */
  636. selectText : function(start, end){
  637. var me = this,
  638. v = me.getRawValue(),
  639. doFocus = true,
  640. el = me.inputEl.dom,
  641. undef,
  642. range;
  643. if (v.length &gt; 0) {
  644. start = start === undef ? 0 : start;
  645. end = end === undef ? v.length : end;
  646. if (el.setSelectionRange) {
  647. el.setSelectionRange(start, end);
  648. }
  649. else if(el.createTextRange) {
  650. range = el.createTextRange();
  651. range.moveStart('character', start);
  652. range.moveEnd('character', end - v.length);
  653. range.select();
  654. }
  655. doFocus = Ext.isGecko || Ext.isOpera;
  656. }
  657. if (doFocus) {
  658. me.focus();
  659. }
  660. },
  661. <span id='Ext-form-field-Text-method-autoSize'> /**
  662. </span> * Automatically grows the field to accomodate the width of the text up to the maximum field width allowed. This
  663. * only takes effect if {@link #grow} = true, and fires the {@link #autosize} event if the width changes.
  664. */
  665. autoSize: function() {
  666. var me = this;
  667. if (me.grow &amp;&amp; me.rendered) {
  668. me.autoSizing = true;
  669. me.updateLayout();
  670. }
  671. },
  672. afterComponentLayout: function() {
  673. var me = this,
  674. width;
  675. me.callParent(arguments);
  676. if (me.autoSizing) {
  677. width = me.inputEl.getWidth();
  678. if (width !== me.lastInputWidth) {
  679. me.fireEvent('autosize', me, width);
  680. me.lastInputWidth = width;
  681. delete me.autoSizing;
  682. }
  683. }
  684. }
  685. });
  686. </pre>
  687. </body>
  688. </html>