View Full Version : Filter keystrokes that do not match for the Extjs combo box using regular expression

25 May 2012, 2:17 AM
I have a combo box with some pre-populated value like 0,10,20....100
It is editable (editable:true).
I want that user can only enter any value between 0-100 (Like 0.00, 45.78, 78.89, 100.00, 45, 75, 96 etc...)
For this I used the below regular expression in the maskRe attribute
maskRe:/^100(\.0{0,2})? *%?$|^\d{1,2}(\.\d{1,2})? *%?$/

But the above regular expression is not working while I am using it with the extjs combo box. I am not able to enter any fraction value. It is allowing me to enter only whole number like 0, 1, 30, 45, 37 etc.. but not 37.78, 98.74 etc...

The above expression I have tested on the below Regular expression tester tool. It is working fine.

Here is the code snippet:
_editCombo = new Ext.form.ComboBox({
maskRe:/^100(\.0{0,2})? *%?$|^\d{1,2}(\.\d{1,2})? *%?$/,
width: 134,
store: new Ext.data.JsonStore({
fields: ['value', 'label'],
data: coperValue
valueField: 'value',
displayField: 'label',
initComponent: function() {
if (Ext.isEmpty(this.tpl)) {
this.tpl = '<tpl for="."><div ext:qtip="{' + this.displayField + '}" class="x-combo-list-item">{' +
this.displayField + '}</div></tpl>';

Please provide your inputs. I got stuck.


7 Jun 2012, 11:48 AM
First issue I see before I use your code is you shouldn't override initComponent when creating an instance. You should just set the configs in the config object not in a method.

7 Jun 2012, 8:24 PM
If you will use the rgular expression mentioned below in combo box it doed not work in case of extjs. else where it is working.
You can try by just initializing a ext combo and use that expression

:/^100(\.0{0,2})? *%?$|^\d{1,2}(\.\d{1,2})? *%?$/