» Fig Leaf Software Home

We've Got You Covered.

Wednesday, January 8, 2014

Ext JS 4: Custom Word Counter Validation Type

Steve Drucker discusses how he solved a problem around a recent Ext JS 4 project involving defining text areas with limits on the number words that can be entered by the user.

He solved this by implementing a custom validation type (vtype) as illustrated below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Ext.apply(Ext.form.field.VTypes, {
    wordlimit : function(v, field) {
         
        v = v.replace(/(^\s*)|(\s*$)/gi,"");
        v = v.replace(/[ ]{2,}/gi," ");
        v = v.replace(/\n /,"\n");
        var words = v.split(' ').length;
         
        var numremaining = field.maxWords - words;
         
        var fieldLabel = field.getFieldLabel();
         
        fieldLabel = fieldLabel.substring(0, fieldLabel.indexOf('(') - 1);
        field.setFieldLabel(fieldLabel + " (" + numremaining + " words remaining" + " )");
         
         
        if (words <= field.maxWords) {
            return true;
        } else {
            return false;
        }
         
    },
    wordlimitText : "You exceeded the maximum number of words"
You can also apply the vtype to a textarea as illustrated below:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var config = {
  xtype: 'textareafield',
  fieldLabel: 'Describe yourself (50 word maximum)',
  labelAlign: 'top',
  allowBlank: false,
  name: 'description',
  anchor: '100%',
  resizable: true,
  resizeHandles: 's',
  vtype: 'wordlimit',
  maxWords: 50
};
 
panel.add(config);

Play with the example by clicking here!
[Cross-posted on Druck-IT]

No comments:

Post a Comment

About Us

Fig Leaf Software is an award-winning team of imaginative designers, innovative developers, experienced instructors, and insightful strategists.

For over 20 years, we’ve helped a diverse range of clients...

Read More

Contact Us

202-797-7711

Fig Leaf Software

1400 16th Street NW
Suite 450
Washington, DC 20036

info@figleaf.com