 |
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.
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());
}
}
