1. #11
    Sencha User medley's Avatar
    Join Date
    Apr 2008
    Location
    Luxembourg
    Posts
    128
    Vote Rating
    0
    medley is on a distinguished road

      0  

    Default


    Thanx for your help.

    Medley

  2. #12
    Sencha User medley's Avatar
    Join Date
    Apr 2008
    Location
    Luxembourg
    Posts
    128
    Vote Rating
    0
    medley is on a distinguished road

      0  

    Default


    In my previous project, we were using this function to set a input mask

    Code:
    var 
    JOK_ALPHANUM = '?',
    JOK_ALL = '*',
    JOK_NUM = '0',
    JOK_ALPHA = 'A',
    JOK_00 = JOK_ALPHA+JOK_NUM+JOK_ALPHANUM+JOK_ALL;
    
    
    function setMaskInput (id, motif) 
    {
        var o = document.getElementById(id);
        if (!o) return;
        o.motif = motif;
        o.shiftDown = false;
        o.onkeydown = kdn;
        o.onkeyup = kup;
    }
    function kup () 
    {
        if (!event) return;
        if (event.keyCode == 16) this.shiftDown = false;
    }
    
    function kdn () 
    {
        if (!event) return;
        var c = event.keyCode;
        //if ( == 16) this.shiftDown = true;
        if (c == 9) return true;
        if (c < 48 && c!=8 && c!=32 && c!=46 && c != 16 && c!=37 && c!=39 && c!=36 && c!=35 ) return false;
    
        var str = this.value;
        
        if (c == 37 || c == 35 || c == 36 || c == 39 || c == 46) 
        {
            return true;
        } 
        
        if (c == 8) {
            do {
            str = str.substring(0, str.length-1);
            } 
            while (str.length>0 && JOK_00.indexOf(this.motif.charAt(str.length-1))== -1);
        }
        else 
        {
        
            if (this.motif.length == str.length) return false;
            
            while (JOK_00.indexOf(this.motif.charAt(str.length))==-1) 
            {
                str+= this.motif.charAt(str.length);
            }
    
            if (str.length == this.motif.length ) 
            {
                return false;
            }
    
            var x = this.motif.charAt(str.length);
            
            if ( x == JOK_NUM && (c < 96 || c > 105) && (c < 48 || c > 57 )) return false;
            if (x == JOK_ALPHA && (c < 65 || c > 90)) return false;
            if (x == JOK_ALPHANUM) 
            {
                if (c < 48) return false;
                if (c > 57 && c < 65) return false; 
                if (c > 90) return false;
            }
    
            var k = cleanKeyCode(c);
            k = k[((this.shiftDown)? "toLower":"toUpper")+"Case"]();
            str+= k;
            
            if (str.length == (this.motif.length - 1)&& (c < 96 || c > 105)) 
            {
                str+= this.motif.charAt(this.motif.length - 1);
            }
        }
        this.value = str;
        return false;
    }
    I used it in my Extjs project like that and it works :
    Code:
    {
                        id:'input.text.peNumber',
                        xtype:'textfield',
                        fieldLabel: TOP.displayReportDetails.field.report.numeroPE,
                        name: 'peNumber',
                        width : 75
                    }
    ......
    ......
    setMaskInput('input.text.peNumber', "AA000.000");
    I know. It is a old javascript code. But I think It is possible to make it better.

    Medley

  3. #13
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    83
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    I think Ext JS avoids this, because it is very user-unfriendly:
    - You can't paste data
    - You can't change a digit in an exiting entry

  4. #14
    Sencha User medley's Avatar
    Join Date
    Apr 2008
    Location
    Luxembourg
    Posts
    128
    Vote Rating
    0
    medley is on a distinguished road

      0  

    Default


    True, there are some restrictions.
    But in my case, we need to guide the user for complex input.

    For example, I have a procedure number whose mask is 9999/9999(AAA) or a report number whose mask is A9-9999/9999.

    That's why I was looking something similar in Extjs.

    Medley

  5. #15
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    83
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    The 'Ext' way would be to restrict the input to the valid characters and validate the entered text (as you can see in my VType example posted earlier).

  6. #16
    Sencha User medley's Avatar
    Join Date
    Apr 2008
    Location
    Luxembourg
    Posts
    128
    Vote Rating
    0
    medley is on a distinguished road

      0  

    Default


    It is an very interesting example.
    I will use the code for fields which don't need an input mask but just a validation.
    For example, to enter a name without special characters.

    Thanks for the help.

    Medley

  7. #17
    Ext JS Premium Member
    Join Date
    Aug 2007
    Posts
    269
    Vote Rating
    0
    gotcha is on a distinguished road

      0  

    Default Unprintable characters

    Unprintable characters


    Need is to allow users to type in only printable characters. Tried to do it the following way, but it doesn't seem to be working - any ideas ?

    PHP Code:
            var luPrintableChars = /[x00-x1f]/;
            
    Ext.apply(Ext.form.VTypes, {
                
    luVtypePrintableChars: function(v){
                    return 
    luPrintableChars.test(v);
                },
                
    luPrintableCharsText'Printable characters only',
                
    luPrintableCharsMask: /[x00-x1f]/
            });
            
            var 
    searchBox = new Ext.form.TextField({
                
    id'txtSearchFilter',
                
    scope:this,
                
    emptyText"Type to filter grid contents",
                
    disabledtrue,
                
    vtype'luVtypePrintableChars'
            
    }); 

  8. #18
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    83
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Your VType config is a bit off and your regex should contain exactly the opposite:

    Code:
    var luPrintableChars = /[^\x00-^\x1f]/;
    Ext.apply(Ext.form.VTypes, {
      luPrintableChars: function(v){
        return luPrintableChars.test(v);
      },
      luPrintableCharsText: 'Printable characters only',
      luPrintableCharsMask: luPrintableChars
    });
            
    var searchBox = new Ext.form.TextField({
      id: 'txtSearchFilter',
      scope:this,
      emptyText: "Type to filter grid contents",
      disabled: true,
      vtype: 'luPrintableChars'
    });

  9. #19
    Ext User
    Join Date
    Mar 2009
    Posts
    39
    Vote Rating
    0
    kcireneg is on a distinguished road

      0  

    Default


    I'm also having a problem, how about allowing only the Male or Female values in a textfield? is it possible? or just putting a validator if it is not a Male or Female. Pls. help.

  10. #20
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    83
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Wouldn't a combobox or a radio group be more appropriate for only 2 valid entries?