Overriding Ext.form.Label - setText

[neurodon]

Hello,

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:

Example:
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;
            }
            if(me.rendered){
                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

Brandon

[mitchellsimoens]

Have you checked out this example?

http://docs.sencha.com/ext-js/4-0/#!...ts/editor.html

If you look at editor.js, in the afterrender event it creates Ext.Editor and in the field object of that is where you can change the xtype of the field that is created. Also, the height of the Editor would need to be changed. That will get you almost there to use a textarea for the multiline. The last part is increasing the height of the label that is being edited.

[neurodon]

Okay, I've almost got it...

Per the example, I am doing the on the fly editing in the events. However, the 'beforestartedit' function does not work as intended. It is ignoring the

ed.setValue(ed.getValue().replace('<br/>','\n'));

line and not making any alterations to the textarea. Thoughts?

  startEdit: function(e,t) {
            var editor = Ext.create('Ext.Editor', Ext.apply({
                updateEl: true,
                shadow: false,
                field: this.field,
                listeners: {
                    beforestartedit: function(ed,el,value,opts) {
                       ed.setValue(ed.getValue().replace('<br/>','\n'));
                       return true;
                    },
                    beforecomplete: function(ed, value){
                       ed.setValue(ed.getValue().replace(/\n/g,'<br />'));
                       return true;
                    }
                },
            }));
            editor.startEdit(t);
            editor.alignTo(this.id,"c-tl", this.field.offset);
        }

[neurodon]

I noticed that ed.getValue() was returning nothing, so I switched to the 'value' variable. The string replacement is working fine, however ed.setValue() does not alter the textarea as intended.

[neurodon]

Any thoughts on this? It seems like a framework bug, but I want to make sure my expectations on the events functionality are correct before I put together a fix to submit to SVN.

[neurodon]

I'm just going to consider this a behavior that's outside the standard framework. I'll prepare code for it and publish it, just in case anyone wants to use it or commit it to svn.

Brandon