How to render HTML in a textareafield

[zwikske]

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:

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 !

[jay@moduscreate.com]

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.

[zwikske]

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

[ingo.hefti]

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

[zwikske]

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.