Hybrid View

  1. 1 Nov 2007 4:42 AM #1
    redgrey
    redgrey is offline
    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
    Reply With Quote Reply With Quote
  2. 1 Nov 2007 5:33 AM #2
    tryanDLS
    tryanDLS is offline
    Sencha - Community Support Team
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    1
    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.
    Tim Ryan
    Read BEFORE posting a question / BEFORE posting a Bug
    Use Google to Search - API / Forum
    API Doc (4.x | 3.x | 2.x | 1.x) / FAQ / 1.x->2.x Migration Guide / 2.x->3.x Migration Guide
    Reply With Quote Reply With Quote
  3. 1 Nov 2007 5:43 AM #3
    fay
    fay is offline
    Sencha User fay's Avatar
    Join Date
    Apr 2007
    Location
    Ireland
    Posts
    1,750
    Vote Rating
    6
    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(fieldId, newLabel){
          var     label = Ext.DomQuery.select(String.format('label[for="{0}"]', fieldId));
          if (    label){
                label[0].childNodes[0].nodeValue = newLabel;
          }
        }
      }
    }();
    Ext.onReady(TestForm.init, TestForm);
    </script>
      
    </head>

    <body> 
    <div id="test-form"></div>
    <a href="javascript:TestForm.changeLabel('first', 'Nickname:')">Change</a>   
    </body>
    </html> 
    Reply With Quote Reply With Quote
  4. 20 Feb 2008 12:59 PM #4
    crxtech
    crxtech is offline
    Ext User crxtech's Avatar
    Join Date
    Nov 2007
    Location
    Baltimore, MD
    Posts
    87
    Vote Rating
    0
    crxtech is on a distinguished road
      0  
    Send a message via AIM to crxtech

    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
    Reply With Quote Reply With Quote
  5. 25 Jul 2008 12:19 PM #5
    superDuke
    superDuke is offline
    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     r = 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!'); 
    Reply With Quote Reply With Quote
  6. 2 Dec 2009 9:01 AM #6
    Keith Chadwick
    Keith Chadwick is offline
    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  
    Send a message via MSN to Keith Chadwick Send a message via Skype™ to Keith Chadwick

    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
    Reply With Quote Reply With Quote
  7. 10 Dec 2009 5:40 AM #7
    Condor
    Condor is offline
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,251
    Vote Rating
    40
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold
      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;
  }
});
    Reply With Quote Reply With Quote