1. #1
    Ext User
    Join Date
    Jul 2009
    Posts
    7
    Vote Rating
    0
    Vesna is on a distinguished road

      0  

    Default TextField setMaxLength validation

    TextField setMaxLength validation


    The TextField is restricted with a maxLength:

    TextField<String> name = new TextField<String>();
    name.setMaxLength(10);

    That validation (of more than 10 characters) is done after the user leave the field, and the field is marked as invalid. The user can type more than 10 characters.
    The behavior I need is to prevent them of typing more than 10 characters. Isn't that how the maxLength is supposed to work?
    How can I achieve this?

  2. #2
    Sencha User
    Join Date
    Jul 2009
    Location
    India, Chennai
    Posts
    30
    Vote Rating
    0
    suresh.sivanantham is on a distinguished road

      0  

    Default try dis

    try dis


    Code:
            final TextField<String> t = new TextField<String>();
            t.addListener(Events.KeyPress, new KeyListener(){
                @Override
                public void handleEvent(ComponentEvent e) {
                    if (t.getValue().length() > 5)
                        e.stopEvent();
                }
            });

  3. #3
    Ext User
    Join Date
    Jul 2009
    Posts
    7
    Vote Rating
    0
    Vesna is on a distinguished road

      0  

    Default


    Thanks for the response.
    The problem I found out with that code is that after the event is stopped, nothing can be done with the value, not even delete or backspace can be pressed, and the value cannot be overridden as well.
    So what I am doing for now is:
    On KeyUp event if the "length > ___" I am switching the value back.

    final TextField<String> t = new TextField<String>();
    t.addListener(Events.KeyUp, new KeyListener(){
    @Override
    public void handleEvent(ComponentEvent e) {
    if (t.getValue().length() > 5)
    String subStr = t.getValue().substring(0, 5);
    e.stopEvent();
    t.setValue(subStr);
    }
    });
    Since the value is never bigger than 5, practically event is never stooped and the user can press any button including delete and all others.
    The only problem I found with this technique is that after the 5th character, the user for very short time see what he types and that new typed value is deleted.
    If someone find more natural way of doing this, please let me know.
    I do not know how before the Key is pressed to check the new length and than cancell that key pressed operation.

  4. #4
    Ext User
    Join Date
    Nov 2008
    Posts
    44
    Vote Rating
    0
    Feltros is on a distinguished road

      0  

    Default


    Since theres no way to tell what the user pressed before the value ends up in the box that I know of (to tell if it was a letter/symbol or a backspace) I can't see you getting better functionality this way.
    A lot of forums have this feature where they only let you type 500 words into a box and then it stops, maybe look into how thats done in HTML and it may give some clues as to how you can do it in GXT.

    Personally though I think that functionality is quite intuitive/cool, the user sees that they've gone over the limit and the things they type over the limit will be deleted. It also presumably means if someone tried to paste a 20character long string in it'd be cut to X characters?

  5. #5
    Ext User
    Join Date
    Sep 2008
    Location
    Germany
    Posts
    961
    Vote Rating
    0
    Arno.Nyhm is on a distinguished road

      0  

    Default


    or you can set the "maxlength" html property by yourself which takes the requested functionality:

    see http://www.w3schools.com/tags/att_input_maxlength.asp


    PS: but i dont like this. i prefer the red invalid mark.
    for example: if you make internet banking and copy a account number which you get sometimes via email with spaces and paste in this number into the field then with this setting it cut out the last numbers. so you have copy this number to a editor - remove the spaces and then you can copy it to the banking form. :-(
    This forum needs your help: you got hints from the community and now you have fixed your code? dont just reply with "now its fixed" or "i found the error"! please take the time to post also an detailed answer with the working code.

    GreaseMonkey Script for a GXT-only Forum: it hides ExtJs here: New Posts • Search Results • Advanced Search form • Category overview http://www.extjs.com/forum/showthrea...041#post410041

  6. #6
    Ext User
    Join Date
    Jul 2009
    Posts
    7
    Vote Rating
    0
    Vesna is on a distinguished road

      0  

    Default


    SOLVED:

    Thanks to everybody who contribute to find the best solution.
    The issue was: if the TextField has set maxLength (ex: 5) I want to stop the user for even typing the 6th character.
    The solution was to add into TextField HTML: maxlength = "50".

    I have my class that extend TextField:
    Code:
    public class MyTextField extends TextField {
    
        private int _maxLength;
    
        ....(constuctor code here)....
        .....
    
        @Override
        public void setMaxLength(int maxLength) {
            super.setMaxLength(maxLength);
            _maxLength = maxLength;
        }
    
        @Override
        protected void afterRender() {
            super.afterRender();
    
            getInputEl().setElementAttribute("maxlength", _maxLength);
        }
    
    }
    Works like a charm.
    Do not forget when you create your "custom textField, to set the maxLength.

  7. #7
    Ext User
    Join Date
    Sep 2008
    Location
    Germany
    Posts
    961
    Vote Rating
    0
    Arno.Nyhm is on a distinguished road

      0  

    Default


    you dont need to remember the value in _maxLength because you have it also in getMaxLength

    but you forgot to change it after its rendering. like the super.sexMaxLength it should be possible to change it also after rendering:

    PHP Code:
    public class RestrictedTextField extends TextField {

        public 
    RestrictedTextField() {
        }

        @
    Override
        
    public void setMaxLength(int maxLength) {
            
    super.setMaxLength(maxLength);
            
    applyMaxLength();
        }

        @
    Override
        
    protected void afterRender() {
            
    super.afterRender();
            
    applyMaxLength();
        }

        private 
    void applyMaxLength() {
            if (
    rendered) {
                
    getInputEl().setElementAttribute("maxlength"getMaxLength());
            }
        }

    This forum needs your help: you got hints from the community and now you have fixed your code? dont just reply with "now its fixed" or "i found the error"! please take the time to post also an detailed answer with the working code.

    GreaseMonkey Script for a GXT-only Forum: it hides ExtJs here: New Posts • Search Results • Advanced Search form • Category overview http://www.extjs.com/forum/showthrea...041#post410041

  8. #8
    Sencha User
    Join Date
    Feb 2012
    Posts
    2
    Vote Rating
    0
    syamlal is on a distinguished road

      0  

    Default


    Hi Vesna,
    I had the same problem and tried your fix. It works fine on mozilla but not in IE... any solution???

  9. #9
    Sencha User
    Join Date
    Jan 2011
    Location
    SF Bay Area, CA
    Posts
    5
    Vote Rating
    1
    JonathanEF is on a distinguished road

      0  

    Default


    Better solution than using a listener is to take advantage of build in DOM functionality. I found this solution by looking through ext-all-debug.js (the version I have seems to lack a setMaxLength function).

    so I would add the following function to your model
    Code:
        ,setMaxLength: function(newMaxLength) {
            this.maxLength = Ext.Number.from(parseInt(newMaxLength), this.initialConfig.maxLength);
            if(this.enforceMaxLength) {
                this.inputEl.dom.maxLength = this.maxLength;
            }
        }
    I've confirmed that this solution works in Chrome, FireFox, and IE (7,8,9).

    You could easily make a function for number type fields that did something like number.setMaxValueLength(newMaxValue); Then you just do String(newMaxValue).length for the new maxLength.