Rendering HTML in editable form field

[JoshS]

Read this post: http://www.sencha.com/forum/showthre...037#post526037

Hello,

I'm new to ext and I cannot for the life of me work out how to render HTML into a textarea, or other suitable xtype.

Here is what I am trying to do:

1. User inputs text (regex to be exact) into a field on an ext window.
2. Grab text from field.
3. Text is parsed and highlighted appropriately (div tags, css, etc...), returns string.
4. String, something like: <div class="matchedbrace">[</div>Stuff<div class="matchedbrace">]</div> is lobbed back into the textarea, now all rendered and highlighted, etc.

This highlighting updates on keyup. Note that this has to be an editable, dynamic field - not a panel or label as covered in the FAQ.

What exactly would be the best way of doing this? All of the ways I've tried to do this have resulted in having raw HTML in the field, or '[Stuff]' with no highlighting.

Any help would be hugely appreciated!

Edit:

I wonder if its something to do with adding an html node with the domhelper? I did try that, but it didn't seem to work...

[JoshS]

Updated with a bit more info.

I'd really appreciate your help, even if its just pointing me in a possible direction.

[Animal]

I don't really understand the problem.

If you want to edit text, you use an Ext.form.TextArea

[JoshS]

Thanks for your reply - let me explain in a less verbose way.

I have a TextArea in which the user types Regex.

I then have a script which gets that text, highlights it - i.e. wraps div tags around it to colour it. e.g. [A-Za-z] would be returned as:

<div class="matchedbracket">[</div>A-Za-z<div class="matchedbracket">]</div>

...highlighting the brackets. The highlighter processes the string stored in the textbox on KeyUp while the user is typing.

I now want to put this string from the highlighter script back into the TextBox, so that the divs are rendered, thus highlighting the brackets. However, what happens is either the div tags are stripped (setValue) resulting in [A-Za-z] again, or the text - including the non-rendered div tags is set back into the TextBox (e.g. <div class="matchedbracket">[</div>A-Za-z<div class="matchedbracket">]</div> as a raw string, rather than actually applying the CSS and colouring it.)

How do I get div tags to apply in an editable TextBox?

[Animal]

I do not understand that at all.

[JoshS]

I need to display HTML in a textbox, or other editable element!

Can I do that?

[Animal]

As I said, that is what an Ext.form.TextArea is for!

[JoshS]

But it doesn't render divs!

I either get the actual source in the textarea, i.e. '<div class="superbrightcolour">foobar</div>' or just 'foobar' with no CSS style applied.

It has to be dynamic, too. I can't just use 'html:...'

[Animal]

"either"??? What do you mean?

I'm going to have to quit. I cannot understand what you need.

[JoshS]

Say I have a css class called 'matchingbracket' that makes text colour red.

If I use .setRawValue('<div class="matchingbracket">[</div> TEXT <div class="matchingbracket">]</div>') or .update('<div class="matchingbracket">[</div> TEXT <div class="matching bracket">]</div>')

The textarea shows this (<div>s aren't rendered):

<div class="matchingbracket">[</div> TEXT <div class="matchingbracket">]</div>

If I use .setValue, the text area shows this without the CSS being applied (The <div>s are stripped):

[TEXT]

All I need is CSS applied within a textarea. It is exactly the same effect as on this site: http://regexpal.com/. Type [TEXT] in the top textbox. Notice how it's being highlighted as you type? There's a script which is adding div tags around what you type, highlighting it on keyUp. Those <divs> aren't working (i.e. changing the highlight colour) in an ext textarea.

That's it. That's all I am looking for. Colour text in textareas (or other suitable element) with <div> tags.

Thank you for your help.