1. #1
    Ext User
    Join Date
    May 2007
    Posts
    14
    Vote Rating
    0
    redgrey is on a distinguished road

      0  

    Question change fieldLabel of Ext.form.Field

    change fieldLabel of Ext.form.Field


    can't figure out how to change the Label of an Ext.form.TextArea component at runtime (after the form has been rendered)

    myExtFormTextArea.fieldLabel = 'new label';
    doesn't work

    maybe someone could give me a hand, thnx

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    You can't just a change a config property after render and expect it do something. You can use Element.up() on the Field's element to find the label entry.

  3. #3
    Sencha User fay's Avatar
    Join Date
    Apr 2007
    Location
    Ireland
    Posts
    1,750
    Vote Rating
    9
    fay will become famous soon enough fay will become famous soon enough

      0  

    Default


    Was just about to post the following, but up() makes more sense!

    PHP Code:
    var TestForm = function(){
      return {
        
    init: function(){
          var 
    form = new Ext.form.Form();
          
    form.add(new Ext.form.TextField({
            
    fieldLabel'First Name'
            
    id:'first'
            
    name'first',  
            
    width:175
          
    }));     

          
    form.render('test-form');
        },

        
    changeLabel: function(fieldIdnewLabel){
          var 
    label Ext.DomQuery.select(String.format('label[for="{0}"]'fieldId));
          if (
    label){
            
    label[0].childNodes[0].nodeValue newLabel;
          }
        }
      }
    }();
    Ext.onReady(TestForm.initTestForm);
    </script>
      
    </head>

    <body> 
    <div id="test-form"></div>
    <a href="javascript:TestForm.changeLabel('first', 'Nickname:')">Change</a>   
    </body>
    </html> 

  4. #4
    Ext User crxtech's Avatar
    Join Date
    Nov 2007
    Location
    Baltimore, MD
    Posts
    87
    Vote Rating
    0
    crxtech is on a distinguished road

      0  

    Default Element.up() usage

    Element.up() usage


    Quote Originally Posted by tryanDLS View Post
    You can't just a change a config property after render and expect it do something. You can use Element.up() on the Field's element to find the label entry.
    I'm trying to do the same thing, but I can't find the documentation on how to use Element.up(). Could you point me in the direction of some documentation or an example??

    Thanks

  5. #5
    Ext JS Premium Member
    Join Date
    Jun 2008
    Posts
    110
    Vote Rating
    0
    superDuke is on a distinguished road

      0  

    Default Something like this?

    Something like this?


    I'm a bit of a noob myself, so please excuse the mess. This seems to work,

    PHP Code:
    Ext.override(Ext.form.Field, {
       
    setLabel: function(text){
          var 
    this.getEl().up('div.x-form-item');
          
    r.dom.firstChild.firstChild.nodeValue String.format('{0}'text);
       }
    }); 
    And then you could call:
    PHP Code:
    myTextField = new Ext.form.TextField({..});
    myTextField.setLabel('Excellent!'); 

  6. #6
    Sencha User Keith Chadwick's Avatar
    Join Date
    Nov 2009
    Location
    Ottawa Canada
    Posts
    50
    Vote Rating
    0
    Keith Chadwick is on a distinguished road

      0  

    Default


    It seems to me that it would be a lot easier to do it this way:

    Where component is the form control..

    Ext.get(component.getEl().up('div.x-form-item').query('label[for='+component.id+']')[0]).update('you html here')

    Last edited by Keith Chadwick; 2 Dec 2009 at 9:23 AM. Reason: query returns dom not El so need to wrap with Ext.get

  7. #7
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    86
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    I would recommend:
    Code:
    Ext.override(Ext.form.Field, {
      setFieldLabel : function(text) {
        if (this.rendered) {
          this.el.up('.x-form-item', 10, true).child('.x-form-item-label').update(text);
        }
        this.fieldLabel = text;
      }
    });

  8. #8
    Sencha User nickweavers's Avatar
    Join Date
    Feb 2008
    Posts
    106
    Vote Rating
    0
    nickweavers is on a distinguished road

      0  

    Default


    Thanks Condor. That really helped me out. (Would be nice to see that override get absorbed into the base Ext.form.Field someday).

  9. #9
    Sencha User
    Join Date
    Sep 2009
    Posts
    41
    Vote Rating
    0
    completej is on a distinguished road

      0  

    Default


    Brilliant, thank you.

  10. #10
    Sencha User
    Join Date
    Feb 2011
    Posts
    1
    Vote Rating
    0
    arefin is on a distinguished road

      0  

    Smile Change Fieldlabel

    Change Fieldlabel


    I used Ext.getCmp('daterange').label.update('Range '); and it works.
    Tell me if I am wrong.

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..." hd porno faketaxi