1. #1
    Sencha Premium Member
    Join Date
    Sep 2012
    Location
    The Netherlands
    Posts
    74
    Answers
    7
    Vote Rating
    4
    zwikske is on a distinguished road

      0  

    Default Unanswered: How to render HTML in a textareafield

    Unanswered: How to render HTML in a textareafield


    Hi all,

    I'm struggling with styling HTML inside a textareafield. I'm using the example code in the documentation and altered it a bit:
    Code:
    Ext.create('Ext.form.Panel', {
        fullscreen: true,
        items: [
            {
                xtype: 'fieldset',
                title: 'About you',
                items: [
                    {
                        xtype: 'textfield',
                        label: 'Name',
                        name: 'name'
                    },
                    {
                        xtype: 'textareafield',
                        label: 'Bio',
                        maxRows: 4,
                        name: 'bio',
                        styleHtmlContent: true,
                        value: 'this <i>is</i> an example'
                    }
                ]
            }
        ]
    });
    As you can see I set the value with content that contains some HTML tags. Together with the 'styleHtmlContent' config value I expect the word 'is' to be italic when I run the program. Unfortunately this doesn't happen. Also, setting styleHtmlContent to false doesn't seem to work as well, it really doesn't seem to matter what I fill in, boolean, a string or even null seem to render the value in the same way. As soon as I remove the 'styleHtmlContent' completely from the config it will render as usual.

    When I set the config option 'html' to a string with some HTML tags the strings is rendered correctly, though the string is visible under the actual value of the of the component. That means if you have a value set to 'this is an example text' and the html set to 'this is <i>some</i> HTML', they would render both. and it looks kinda weird.

    Is it possible to set the value and render it as HTML? If the answer to this question is 'yes', then my next question is how? I've tested with both the 2.1.1 stable release and the 2.2.0 release candidate, both give the same output.

    Thanks for any help !

  2. #2
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Answers
    102
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    You can't render HTML in an input field. It just doesn't work that way.

    HTML editors in mobile simply are not an option at this time due to iframe issues.

  3. #3
    Sencha Premium Member
    Join Date
    Sep 2012
    Location
    The Netherlands
    Posts
    74
    Answers
    7
    Vote Rating
    4
    zwikske is on a distinguished road

      0  

    Default


    Thank you for your answer Jay. Can you tell me where the 'html' and 'styleHtmlContent' config option/feature is used for then?

  4. #4
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Berne, Switzerland
    Posts
    714
    Answers
    41
    Vote Rating
    42
    ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about

      0  

    Default


    when you look at the hierarchy at the right hand side http://docs.sencha.com/touch/2.2.0/#...field.TextArea then you see that the TextArea inherits from the Ext.Component which you can use in many ways. That's why you have the html stuff in the input fields as well. So the long list of config options for every component doesn't necessarily mean that you can use all of them for that component. Hope that makes sense to you...

  5. #5
    Sencha Premium Member
    Join Date
    Sep 2012
    Location
    The Netherlands
    Posts
    74
    Answers
    7
    Vote Rating
    4
    zwikske is on a distinguished road

      0  

    Default


    Thank you for answering, I understand now . Perhaps this information could be added in the documentation so other people won't be confused why it doesn't work.