Display an info text in a HTML input field if its focus is lost

Now that with Ext Core a light-weight version (just 25kB) of ExtJS has been released, I thought it’s time to build a nice example with it.

The result is something very useful that you can see in actually a lot of web sites: Display a info text inside of a input text field if it is empty and does not have the focus.

Here’s how it looks like:

E-Mail:

To add this behaviour to a input field you just have to call this single line:

As always you can find the code for this component in a library called ‘extensive‘. Feel free to support the project by participating.

Mark Required Fields in a ExtJS Form

I just had the requirement to mark required fields in a ExtJS form. I started with the code from Jason (Thanks!) and extended it a bit.
Now you may customize how the field marker would look like by assigning a CSS class to a requiredFieldCls property. I also added a descriptive tooltip for the marker.
Here’s the code:

Dont’ forget to also include these necessary modifications to Ext.layout.FormLayout:

From know on you can find this code and all my other ExTJS components bundled in a library called ‘extensive’ – hosted at Google Code. Feel free to support the project by participating.

Phone number selector in ExtJS

Wouldn’t it be nice to use a combo box of flag images to select the country code of phone numbers?

If you use a country selection component that’s quite easy. Just wrap it in a re-usable component together with a textfield for the local number and the result looks like this:

And here’s the example’s source:

Update: You can find this code and all my other ExtJS components bundled in a library called ‘extensive’. Enjoy the code and feel free to support the project by participating.