Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Rendering HTML in editable form field

  1. #1

    Default Rendering HTML in editable form field

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

  2. #2

    Default

    Updated with a bit more info.

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

  3. #3
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    I don't really understand the problem.

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

  4. #4

    Default

    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:
    Code:
    <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?

  5. #5
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    I do not understand that at all.

  6. #6

    Default

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

    Can I do that?

  7. #7
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

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

  8. #8

    Default

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


  9. #9
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    "either"??? What do you mean?

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

  10. #10

    Default

    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):

    Code:
    <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):

    Code:
    [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.

Page 1 of 2 12 LastLast

Similar Threads

  1. Possible to use an HTML form element as an Ext.form.FormPanel?
    By wmccafferty in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 30 Aug 2011, 12:27 PM
  2. Rendering existing html form : how to
    By sidd in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 22 Jul 2009, 6:34 AM
  3. html form elements not rendering
    By josh803316 in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 2 Apr 2009, 10:38 AM
  4. Form Element Rendering Issues
    By jezmck in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 7 May 2008, 6:44 AM
  5. Form element appear one by one (slow rendering) remotecomponent form
    By improva in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 7 Feb 2008, 5:12 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •