1. #1
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,663
    Vote Rating
    6
    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
    8,910
    Vote Rating
    443
    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,663
    Vote Rating
    6
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."