CODEWITHSUNDEEP
javascripthtmlextjsextjs4
Gendaful
Gendaful

Reputation: 5802

EXT JS: How to enforce the MaxLength to false at run time?

I am working on textfields and restricting the max length using enforceMaxLength configuration.

So, as a usecase - I am restricting the user to enter only 14 characters. But my textfields appends .00 and a dollar sign once the value is set using this.setRawValue(Ext.util.Format.currency(this.getValue()));

So, after the value is set, the total length of the textfield becomes 18 and it always gives max length violation error message.

Is there any way to avoid the error message but still restrict the user to input only 14 chars? I am trying to clear the maxLength text but I am not able to find a method or a work around to do so.

Any pointers would be helpful.

Upvotes: 1

Views: 1270

Answers (1)

lmno
lmno

Reputation: 1044

You can override the validator function of the textfield and call textfield.validate() when you apply the format.

http://jsfiddle.net/FcXrL/1/

That is a proof of concept, you will want to update the regex.

Now, if you can cook up a good regex and get it to validate in one line you can always use a VType. Just make sure you call textfield.validate() when you set the currency, as changing the text with the format util does not cause the validate function to run.

UPDATE

So I searched high and low for a built-in way of doing this, but this was as good as I can get it.
What we are going to do is catch the keypress event on the textfield, and test how many chars we have. If we go over the threshold (14 in this case) we just .setValue() with a substring of the current input.

http://jsfiddle.net/vYu4G/5/

In this fiddle, I broke the textfield out into its own variable so I could easily do the .on(). If you are using MVC you can just listen for the keypress event in your controller.

Additionally note that there is no enforceMaxLength or maxLength config, and I added the enableKeyEvents config.

Upvotes: 1

Related Questions