I am trying to slightly modify the functionality of the default Ext.form.Label class. For reference, I have an xtype:label component in my application, and when the user double clicks on the component it launches an Ext.Editor control that gives the user write access to the property. My issue is that I am attempting to input an Address, which is multiline:

123 Place St.
Seattle, WA

The Label component has .text and .html properties. When the user inputs an address bound to a 'textarea' field using Ext.Editor, the input contains standard Chr(13) line breaks. When the Label outputs the data, the Chr(13) needs to be rendered as "<br>" using the .html property to properly display the address. This rendering is not done by default, so I am attempting to override the setText function of Ext.form.Label.

The trick is that I need to maintain the value of .text so that when the user double clicks and starts editing the field again, it does not contain "<br>" but instead keeps the \n character. My understanding is that .setText() is called when .text is modified, so I can exclusively put the "<br>" in to .html and leave .text untouched for the Ext.Editor.

Here is my override code. The application launches without error, however the override provides no change in behavior. (btw: I am developing a MVC app.. so any suggestion about where to put the override in the code structure would be greatly appreciated)

Ext.require('Ext.form.Label', function() {
    Ext.override('Ext.form.Label', {
        setText: function(text, encode){
            var me = this;

            encode = encode !== false;
            if(encode) {
                me.text = text;
                delete me.html;
            } else {
                me.html = text;
                delete me.text;
                me.el.dom.innerHTML = encode !== false ? Ext.util.Format.htmlEncode(text) : text;
                me.el.dom.innerHTML = me.el.dom.innerHTML.replace(/\n/g,'<br />');
            return this;
Any direction would be greatly appreciated