PDA

View Full Version : Restricting input in editable combo box?



harrypottar
21 Apr 2012, 4:37 PM
This sounds like a basic question however I have looked at the docs and searched the forums.

I have a combo box with a store that allows entering new values. Those new values can only be numbers including formatters (period, comma).

How can I restrict input to numbers

thanks
Harry

skirtle
21 Apr 2012, 9:43 PM
This example may prove helpful. It's for a TextField but it should be quite similar for a ComboBox.

The maskRe doesn't prevent other characters being used via copy/paste. Using stripCharsRe helps to prune any characters added via copy/paste but still doesn't guarantee a well-formatted number. The blur listener attempts to normalize the formatting of the number. If you have localization requirements things will get more complicated.

Without the formatters requirement it would simplify a lot.


new Ext.form.field.Text({
maskRe: /[\d,\.]/,
renderTo: Ext.getBody(),
stripCharsRe: /[^\d,\.]/g,
listeners: {
blur: function(field, value) {
var strippedValue = parseFloat(field.getValue().replace(/[^\d\.]/g, '')) || 0;
var newValue = Ext.util.Format.number(strippedValue, '0,000.00');

if (newValue !== value) {
field.setValue(newValue);
}
}
}
});