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

      0  

    Default TextField and MaskRe

    TextField and MaskRe


    Hello,

    I would like to have an input mask for : PE123.456
    The first letter has always to be the letter P and The second letter has always to be the letter E.
    After I have 3 digits, a dot and 3 digits again.

    Thanks for help
    Medley

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    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 Condor has much to be proud of

      0  

    Default


    Use:

    Code:
    /^PE[0-9]{3}\.[0-9]{3}$/

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

      0  

    Default


    I tried it in my code.
    But it is impossible to enter a value. Firefox 3 or I7. Same behaviour.
    Code:
    items: [{
                        xtype:'textfield',
                        fieldLabel: TOP.displayReportDetails.field.report.numeroPE,
                        name: 'peNumber',
                        width : 75,
                        maskRe : /^PE[0-9]{3}\.[0-9]{3}$/
                    }]

  4. #4
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    maskRe restricts character input to the characters specified. e.g. maskRe: /[a-z]/ restricts character input to only lowercase alphabets.

    won't work for your case.

    p.s. seems like the only thing that will be accepted is a single regex character class.

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

      0  

    Default


    And by using regex, how to have the same result ?
    I don't know how works regex.

    Medley

  6. #6
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    you can't. not with a normal TextField as far as i can see.

    closest thing to filtering keystrokes you could do now is:
    Code:
    // restrict character input to only 'P', 'E', digits and the decimal point
    maskRe: /[PE0-9.]/
    [edit]
    hold on.. i think i just thought of something.. let me whip something up
    Last edited by mystix; 7 Aug 2008 at 4:58 AM. Reason: update

  7. #7
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      1  

    Default


    try this
    Code:
    Ext.onReady(function() {
      Ext.QuickTips.init();
    
      new Ext.form.TextField({
        maskRe: /[PE0-9.]/,
        validator: function(v) {
          return /PE[0-9]{3}\.[0-9]{3}/.test(v)? true : 'Entered text must be of the form PExxx.xxx, where x represent digits 0-9.';
        },
        renderTo: document.body
      });
    });
    Last edited by mystix; 7 Aug 2008 at 5:02 AM. Reason: updated to obey return values specified in docs

  8. #8
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    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 Condor has much to be proud of

      1  

    Default


    Correct, you can't use that as a maskRe. Use the following vtype instead:

    Code:
    var peNumberTest = /^PE[0-9]{3}\.[0-9]{3}$/;
    Ext.apply(Ext.form.VTypes, {
    	peNumber: function(v) {
    		return peNumberTest.test(v);
    	},
    	peNumberText: 'Invalid PE number',
    	peNumberMask: /[PE0-9.]/
    });
    
    ...
    
    items: [{
    	xtype: 'textfield',
    	vtype: 'peNumber',
    	...
    }]

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

      0  

    Default


    Is it possible to block the input to n characters ?
    In my case, for example, I don't want to allow to enter more than 9 characters for the field peNumber.

  10. #10
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0