GWT: Bounded TextField in GXT

This article provides a solution for creating a TextField with bounded user input in Sencha GXT (aka Ext GWT), for use in GWT applications.

The Problem

Recently, I was looking for a way to limit the amount of text a user could enter on an HTML form within a GXT application – for example, limiting a zip code input field to five characters. I wanted something that functions identically to the maxlength attribute found in HTML <input type=”text”> fields. While GXT does offer a maxlength attribute within a TextField object, it does not function as one might expect. Instead of limiting the number of characters the user could enter, it interacts with the validation process and displays a validation error (such as highlighting the TextField in red) after the fact if a user entered too many characters.

The Solution

I discovered a post on the Sencha support forum that shows how to create a subclass of TextField with the expected functionality, ie, to limit the number of characters the user can type to be the maxlength attribute. Since I believe such a class is desirable throughout my application, I generalized the original anonymous inner class solution to be a regular Java class.

Simply add the following class to your application and replace all your instances of TextField with BoundedTextField and the maxlength attribute will function as a text limiter. I hope Sencha will eventually include support for this form of maxlength functionality within the API. Thanks to Sven at Sencha for providing the original solution.

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
26
package net.selikoff.gxt.ui.widget;
 
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.google.gwt.user.client.Element;
 
/**
 * Class works like TextField class but Max Length specifies the maximum
 * amount user can type, instead of being used as limit for validation.
 *
 * @author Scott Selikoff
 */
public class BoundedTextField<D> extends TextField<D> {
    @Override
    public void setMaxLength(int m) {
        super.setMaxLength(m);
        if (rendered) {
            getInputEl().setElementAttribute("maxLength", m);
        }
    }
 
    @Override
    protected void onRender(Element target, int index) {
        super.onRender(target, index);
        getInputEl().setElementAttribute("maxLength", getMaxLength());
    }
}