1. #1
    Sencha User
    Join Date
    Jan 2012
    Location
    San Mateo, CA
    Posts
    46
    Vote Rating
    0
    Answers
    7
    neurodon is on a distinguished road

      0  

    Lightbulb Unanswered: Overriding Ext.form.Label - setText

    Unanswered: Overriding Ext.form.Label - setText


    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)

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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,640
    Vote Rating
    898
    Answers
    3573
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Location
    San Mateo, CA
    Posts
    46
    Vote Rating
    0
    Answers
    7
    neurodon is on a distinguished road

      0  

    Lightbulb


    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
    Code:
    ed.setValue(ed.getValue().replace('<br/>','\n'));
    line and not making any alterations to the textarea. Thoughts?

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

  4. #4
    Sencha User
    Join Date
    Jan 2012
    Location
    San Mateo, CA
    Posts
    46
    Vote Rating
    0
    Answers
    7
    neurodon is on a distinguished road

      0  

    Default


    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.

  5. #5
    Sencha User
    Join Date
    Jan 2012
    Location
    San Mateo, CA
    Posts
    46
    Vote Rating
    0
    Answers
    7
    neurodon is on a distinguished road

      0  

    Default


    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.

  6. #6
    Sencha User
    Join Date
    Jan 2012
    Location
    San Mateo, CA
    Posts
    46
    Vote Rating
    0
    Answers
    7
    neurodon is on a distinguished road

      0  

    Default


    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

Thread Participants: 1

Tags for this Thread