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:


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.

3 Ways to render HTML inside of a ExtJS container

It has been a while since my last blog post. The main reason is that I am now having a nice new job at efiport which leads to the situation that I am doing now good old Javascript (mainly ExtJS) instead of Flex.
So I think in the future there will be more posts about ExtJS then Flex. Sorry Flex folks.

To tribute the change a bit, I start with the problem of adding HTML code inside of a ExtJS container.
I thought of three different ways – let’s take a look at them:

It’s easy to think about the first one and you can find it quite often by googling around. Just setting the html property of a panel. The problem I am having with it is that the overhead of a panel is generated and the HTML is just static – I can’t generate similar values at runtime (e.g. a different link label in the example).

So apart from the second example that uses a template, I thought of the third solution that generates a DOM element at runtime using the DomHelper (the autoEl property calls this implicitly) and wraps it in a component. What do you think?