ExtJs NumberField

5
votes

I am using ExtJs NumberField. The good thing is it validates that only numbers are entered. But I want a hyphen as well. How could I go about editing the javascript

  var <portlet:namespace/>issueNoField = new Ext.form.NumberField({  //This takes only numbers
             fieldLabel: 'Issue No',
             width: 120,
             displayField: 'Enter no',  
             valueField:'IssNo'
         });
7
javascriptextjsinputnumbers
What's up with the <portlet:namespace/> thing? – Rene Saarsoo

7 Answers

8
votes
var <portlet:namespace/>issueNoField = new Ext.form.TextField({  //This takes only numbers
  fieldLabel: 'Issue No',
  width: 120,
  regex: /[1-9-]*/
});
2
votes

Use "baseChars" option. 

     var <portlet:namespace/>issueNoField = new Ext.form.NumberField({  //This takes only numbers
         fieldLabel: 'Issue No',
         width: 120,
         displayField: 'Enter no',  
         valueField:'IssNo'
         baseChars: "0123456789-"
     });
1
votes

Try the Fiddle

Its better to use the textfield and adding the maskRe attribute as

maskRe: /^[0-9 -]$/

0
votes

Is the hyphen merely conventional, as in a US zip code (99999-9999)? In that case, you should accept only numeric input, insert the hyphen when that position is reached, and ignore any non-numeric characters.

If they hyphen is significant, so that "12-345" and "123-45" are different inputs, then you are reading text and not a number. However, that would be an extremely unfriendly system.

0
votes

The Regex attribute never worked for me, I used the code below instead:

maskRe: /[1-9-]/,
0
votes
{
xtype: 'textfield',
mask: '(999) 999-9999'
}

What I'm proposing here is that we use a text field and put a mask to it to capture only numeric values in the desires format.

You can mask it according to your needs.

For Example:

'9999999999'
'999-999-9999'

More info This will give the phone number in the format you want

0
votes

Just set the allowExponential config of your numberfield to false. By default it is true and it adds 'e+-' and the decimalSeparator as valid characters.

It's true. The source check the source.