Sep 28

GWT-Ext and jQuery input mask plugin

Tag: Ext,Gwt,Java,Javascript,Programming,Web — Abhijeet Maharana @ 1:59 am

Yesterday, while dabbling with jQuery and getting amazed by the wealth of plugins and effects available for this library, I came across http://digitalbush.com/2008/07/31/masked-input-plugin-114/. It allows you to fit text fields with an input mask to allow only fixed-width input in a certain format. I had seen it first in MS Access a long long time ago.

To use it with GWT-Ext, include jquery.js and jquery.maskedinput.js in your host HTML file. Use <script></script> and not <script/> to avoid wasting time later.

<script language = "javascript" type="text/javascript" src="js/jquery.js" ></script>
<script language = "javascript" type="text/javascript" src="js/jquery.maskedinput.js" ></script>

Now write some native code to call the plugin’s methods:

private native void addPlaceholder(String placeholder, String maskString) /*-{
	$wnd.$.mask.addPlaceholder(placeholder, maskString);
}-*/;
 
private native void mask(String id, String maskString, String placeholderString) /*-{
	if(placeholderString != null)
		$wnd.$('#' + id).mask(maskString, {placeholder:placeholderString});
	else
		$wnd.$('#' + id).mask(maskString);
}-*/;

Add the mask to a text field:

addPlaceholder("~", "[+-]");
textField.doOnRender(new Function(){
	public void execute() {
		mask(textField.getId(), "Rs. ~9999.99/-", " ");
	}
});

This will only allow values of the type “Rs. +2345.50/-” with “Rs. ” and “/-” already filled in for the user.

Update: See this: http://gwt-ext.com/forum/viewtopic.php?f=9&t=2984. Thanks mdeg and vanderbill!

4 Responses to “GWT-Ext and jQuery input mask plugin”

  1. Brunner says:
    July 2nd, 2009 at 3:35 am

    Hi, I have implemented this example succesfully. Now I need to do something like this but using jQuery Validation Engine (http://www.position-relative.net/creation/formValidator/) with Gwt-ext. Can you help me with the native code?

    thanks!

  2. Abhijeet Maharana says:
    July 8th, 2009 at 11:46 pm

    Hi Brunner, I took a quick look at the page. I assume you are referring only to the way the error messages are displayed? Because otherwise, GWT-Ext’s validation support is quite good and I would use that instead.

    Didn’t get a chance to look at the jquery plugin to figure out what hooks it provides. I *think* you will just need to pass GWT-Ext text field’s element to the plugin’s hook that paints those error messages. You can use .getEl() for getting a reference to the ExtJS textfield. I am guessing that you will need to dig a bit into the jQuery plugin to separate the error message stuff from the actual validation stuff.

  3. Clayton says:
    January 20th, 2010 at 8:51 am

    Please sent the code for me. I try with gwt-ext and the sample don’t work.

  4. Abhijeet Maharana says:
    January 20th, 2010 at 1:15 pm

    Hi Clayton, I dont have the sample project … its been long. But the code is really what is posted above. You just need jQuery and the masked input plugin to make it work.

    Even otherwise, see the update at the end of the post.

Leave a Reply