View Full Version : Rendering HTML in editable form field

15 Oct 2010, 9:29 AM
Read this post: http://www.sencha.com/forum/showthread.php?112686-Rendering-HTML-in-editable-form-field&p=526037#post526037


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!


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...

15 Oct 2010, 5:15 PM
Updated with a bit more info.

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

15 Oct 2010, 11:02 PM
I don't really understand the problem.

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

16 Oct 2010, 2:24 AM
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?

16 Oct 2010, 4:50 AM
I do not understand that at all.

16 Oct 2010, 4:55 AM
I need to display HTML in a textbox, or other editable element!

Can I do that?

16 Oct 2010, 4:56 AM
As I said, that is what an Ext.form.TextArea is for!

16 Oct 2010, 4:59 AM
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:...'


16 Oct 2010, 5:17 AM
"either"??? What do you mean?

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

16 Oct 2010, 8:52 AM
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. :)

18 Oct 2010, 12:11 AM
Still looking for a little bit of help for this - it really can't be that complicated.

18 Oct 2010, 1:07 AM
No you can't do that,
My suggestion is to add a validator to your field and return the html based response. If your input should not contain [ then validators return should be

Hello [ this is sample text

validator return:
Hello <b>[</b> this is sample text

But when you do that you need to replace html chars like < > to their code to prevent errors.

Hope it helps.