Learn how to build a web application with ExtJS

If you’re interested in learning ExtJS and by accident know some German, I can recommend you read an article I wrote together with my colleague Stefan Botzenhart. The article is called ‘Kombiniert: Ruby on Rails und Ext JS‘ and is published in the famous German IT magazine iX in their actual special edition called Web on Rails.

In the article we explain the implementation of meinkabinett, a web application where people can vote celebrities for the European government. The implementation uses a rich front-end written in ExtJS and is driven by a Ruby on Rails back-end.

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.

Putting ExtJS templates in separate files

To create a template in ExtJS you usually have to put the template code inline in your javascript.
That could lead to problems if you want to edit your code and the designer wants to change the template. Therefore it’s a good idea to put the template in a separate file.

For that reason I built this loader singleton that is capable of lazy loading ExtJS templates:

Then you can just use your template by calling:

If you call the template loader a second time, the template is not loaded again but retrieved from cache, so you may also preload all your templates before the application starts.

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.