Change textbox to textarea on click

Question

How do I convert a simple text box to text area when the user clicks on it. I'm using EXT JS.

Answer 1

Are you doing it just for visual appearance? Or is there a valid reason for converting it from input to textarea?

If you are doing it just for the visuals of it you can get a long way with just setting the height of your textarea and in the focus event increase the height.

Ext.onReady(function(){

    new Ext.form.TextArea({
        renderTo: Ext.getBody(),
        name: 'myTextArea',
        width: 200,
        height: 22,
        listeners: {
            focus: function(textarea){
                textarea.setHeight(200);
            },
            blur: function(textarea){
                textarea.setHeight(22);
            }
        }
    });

});

EDIT: These stopped working:

Try it here: http://jsfiddle.net/chrisramakers/9FjGv/2/

You can even quite easily animate it for some extra fancy visualy fancy pancy.
http://jsfiddle.net/chrisramakers/9FjGv/3/