1. #1
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,664
    Vote Rating
    7
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default TextField with editable label

    TextField with editable label


    Hi,

    here is a very basic and simple extension that gives the possibility to edit the label of the textfield.
    I did not fine-tuned the appearance of the editor, so you may want to shrink it, or remove the box.
    But this is a good start to get it work.

    Have fun!

    PHP Code:
    Ext.define('Ext.ux.form.field.VariableText', {
        
    extend            'Ext.form.field.Base',
        
    alias             'widget.vartextfield',
        
    requires          : ['Ext.form.field.VTypes''Ext.layout.component.field.Text''Ext.Editor'],
        
    alternateClassName: ['Ext.form.VarTextField''Ext.form.VarText'],
        
    editor            null,

        
    initComponent: function() {
            var 
    me this,
              
    separator me.labelSeparator;

            
    me.callParent();

            
    me.editor = new Ext.Editor({
                
    updateEl true// update the innerHTML of the bound element when editing completes
                
    field    : {
                    
    xtype'textfield'
                
    },
                
    listeners: {
                    
    beforestartedit: function(editorboundElvalueeOpts) {
                        if (
    separator && value.charAt(value.length 1) == separator) {
                            
    boundEl.update(value.slice(0, -1));
                        }
                        return 
    true;
                    },
                    
    beforecomplete : function(editorvaluestartValue) {
                        if (
    separator && value.charAt(value.length 1) != separator) {
                            
    editor.setValue(editor.getValue() + separator);
                        }
                        return 
    true;
                    }
                }
            });
        },

        
    afterRender: function() {
            var 
    me this,
              
    separator me.labelSeparator,
              
    value me.getLabelValue(),
              
    labelEl me.labelEl;

            
    me.callParent();

            
    labelEl.on({
                
    dblclick: function() {
                    if (
    separator && value.charAt(value.length 1) == separator) {
                        
    labelEl.update(value.slice(0, -1));
                    }
                    
    me.editor.startEdit(labelEl);
                }
            })
        },

        
    getLabelValue: function() {
            return 
    Ext.String.trim(this.labelEl.dom.innerText || this.labelEl.dom.innerHTML);
        }
    }); 
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,154
    Vote Rating
    475
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Nice, thanks for sharing ... I have not tried, but does it handle things any different that this example:
    http://docs.sencha.com/extjs/4.2.1/e...ts/editor.html

  3. #3
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,664
    Vote Rating
    7
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


    Hi,

    i didn't know this example. In my case there is a custom component where you can get the label value as well, the mentioned example just edit the label without any further handling.
    And the other example does not strip the separator when edit.
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

Thread Participants: 1