Skip to main content

Ext JS 4: Custom Word Counter Validation Type

One of my recent Ext JS 4 projects involved defining text areas with limits on the number ofwords that can be entered by the user.
I solved this problem 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 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);

Comments

Post a Comment

Popular posts from this blog

Ext4 Apply Store Filtering

In extjs4.1: There are many way for store filtering . Some of code i give here Filtering by single field: store . filter ( 'eyeColor' , 'Brown' );   Alternatively, if filters are configured with an  id , then existing filters store may be  replaced by new filters having the same  id . Filtering by single field: store . filter ( "email" , /\.com$/ );   Using multiple filters: store . filter ([ { property : "email" , value : /\.com$/ }, { filterFn : function ( item ) { return item . get ( "age" ) > 10 ; }} ]);   Using  Ext.util.Filter  instances instead of config objects (note that we need to specify the root config option in this case): store . filter ([ Ext . create ( ' Ext.util.Filter ' , {   property : "email" , value : /\.com$/ , root : 'data' }),   Ext . create ( ' Ext.util.Filter ' , {   filterFn : function ( item ) {   return item . get ( &
Post a Comment
Read more

ExtJS - Grid panel features

What can we do with ExtJS GridPanel? I have to develop a lot of applications in my web app and I see that grid component of ExtJS may fit in. However, I am not aware of what all things I can do with the - off the shelf available framework pieces - available plug-ins in the marketplace and - custom development through my own developers This is a typical question that we hear from the business users who wants to design an application by keeping the framework’s capability in perspective. In this article I have tried to put the list of stuff you can do with grid and hopefully that shall enable you to take advantage of the beauty of ExtJS. Pre-requisites This article assumes that you are familiar with basics of ExtJS What are the available options? In this section I will be taking you through some of the commonly seen usage of ExtJS grid panel. While covering all the capabilities of grid may not be possible, I am sure it will be helpful for the business users who want to
8 comments
Read more

EXTJS - Way to get a reference to the viewport from any controller

An easy way to get a reference to the viewport from any controller Here's an easy way to get a reference to your viewport from any controller: Ext.application({ launch: function(){ this.viewport = Ext.ComponentQuery.query('viewport')[0]; this.centerRegion = this.viewport.down('[region=center]'); } }); then, inside say, a controller, you can call this: this.application.viewport to get a reference to the viewport.
4 comments
Read more