Wanted Form Component that..

[Saeven]

Looks like a standard div, but that when clicked, instamagically transforms into an Ext.form.TextArea of the same size, with events akin to:

editStarted
editComplete

When the edit is finalized, it reverts back to its standard self, firing the edit event. This could even subclass TextArea, but with:



new Ext.form.TextArea({
magic: true
});


Thanks for listenin!
Alex

[Condor]

Do you want it to be a real <div> or only look like a <div> (styled <textarea>) ?

For the first you can use an Ext.Editor (see this thread (http://extjs.com/forum/showthread.php?p=230016) for an example).

For the second you could apply some custom css rules, e.g.

.magic textarea {
background: transparent;
border: 1px solid transparent;
}
.magic textarea.x-form-focus {
background: #FFFFFF url(resources/images/default/form/text-bg.gif) repeat-x scroll 0 0;
border: 1px solid #B5B8C8;
}
with:

{
xtype: 'textarea',
fieldLabel: 'Text',
itemCls: 'magic',
value: 'Some content...'
}