1. #1
    Ext User
    Join Date
    Jul 2008
    Posts
    12
    Vote Rating
    0
    ArunB is on a distinguished road

      0  

    Default Changing fieldLabel dynamically in TextField

    Changing fieldLabel dynamically in TextField


    Hi,
    Is it possible to change the fieldLabel property of TextField dynamically ?

    I checked in the API for Ext.form.TextField. There are no methods like 'setFieldLabel()'.

    Is there any other way to achieve this?

    -Arun

  2. #2
    Sencha User
    Join Date
    Aug 2007
    Location
    Edinburgh
    Posts
    49
    Vote Rating
    0
    lburgess is on a distinguished road

      0  

    Default


    Something like this would work:

    Code:
    Ext.form.Field.prototype.setFieldLabelText = function(text){
        try{
             this.container.parent().child('label').dom.innerHTML = text;
             return true;
        }catch(e){return false;}
    }
    
    field.setFieldLabelText ('New Label');

    ... not fully tested and not sure if you would want/need to return a boolean as to whether or not the update was successful or not.

    Btw.. what are the communities views on using prototype?

  3. #3
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    77
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    prototype as in the js file or the keyword?
    Place this after Ext-all.js
    Code:
    Ext.override(Ext.form.Field, {
       setFieldLabel : function(text) {
          Ext.fly(this.el.dom.parentNode.previousSibling).update(text);
       }
    });

  4. #4
    Ext User
    Join Date
    Jul 2008
    Posts
    12
    Vote Rating
    0
    ArunB is on a distinguished road

      0  

    Default


    Thanks. Now I am able to change the value dynamically.

  5. #5
    Sencha User
    Join Date
    Aug 2007
    Location
    Edinburgh
    Posts
    49
    Vote Rating
    0
    lburgess is on a distinguished road

      0  

    Default


    prototype as in the keyword.

    I had meant to rmove that line out of that post and expand on that somewhere else, but since you brought it up...

    I was going to discuss the pattern of using Ext.override (as you have done) verses prototyping common methods (as I have done) within an Ext environment. I tend to like prototype as it is lighter than every instance having its own method, but noticed that the general pattern when working with Ext is to use methods which are owned by the instance of the class.

  6. #6
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    77
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Quote Originally Posted by lburgess View Post
    prototype as in the keyword.

    I had meant to rmove that line out of that post and expand on that somewhere else, but since you brought it up...

    I was going to discuss the pattern of using Ext.override (as you have done) verses prototyping common methods (as I have done) within an Ext environment. I tend to like prototype as it is lighter than every instance having its own method, but noticed that the general pattern when working with Ext is to use methods which are owned by the instance of the class.
    Just using
    myObj.prototype.someMethod = function ()
    is lighter. and 100% stanard .

    Ext.apply, Ext.override, Ext.extend allow you to append/replace multiple items quickly.

    Personally, I think it's easier to read, and I don't know why.
    Code:
    Ext.override(someObject, {
       someMethod : function() {
    
       }
    
    });
    than
    Code:
    someObj.prototype.someMethod = function() {
    
    }

  7. #7
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    Code:
    Ext.override(someFunction, {  
      bla: function() { // bla }
    });
    
    Ext.apply(someFunction.prototype, {
      bla: function() { // bla }
    });
    
    someFunction.prototype.bla = function() { // bla };
    all do the same thing -- i.e. tack on stuff to a function prototype. think of it as tasty syntactic sugar.

    Ext.override/apply as used above also help to trim filesizes by reducing repetition (from having to reference the entire function prototype chain over and over again e.g.
    Code:
    my.super.duper.long.namespace.someFunction.prototype.bla1 = function() { // bla1 }
    my.super.duper.long.namespace.someFunction.prototype.bla2 = function() { // bla2 }
    my.super.duper.long.namespace.someFunction.prototype.bla3 = function() { // bla3 }
    my.super.duper.long.namespace.someFunction.prototype.bla4 = function() { // bla4 }
    my.super.duper.long.namespace.someFunction.prototype.bla5 = function() { // bla5 }
    )

    p.s. do correct me if i'm wrong
    Last edited by mystix; 1 Aug 2008 at 9:27 AM. Reason: edit

  8. #8
    Ext User krzak's Avatar
    Join Date
    May 2008
    Location
    Poland
    Posts
    62
    Vote Rating
    0
    krzak is on a distinguished road

      0  

    Default


    Quote Originally Posted by jgarcia@tdg-i.com View Post
    prototype as in the js file or the keyword?
    Place this after Ext-all.js
    Code:
    Ext.override(Ext.form.Field, {
       setFieldLabel : function(text) {
          Ext.fly(this.el.dom.parentNode.previousSibling).update(text);
       }
    });
    I've tried it using
    Code:
    dateToField.setFieldLabel("AAAA");
    and got error
    Code:
    Ext.fly(this.el.dom.parentNode.previousSibling) is null

  9. #9
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    83
    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


    This is more flexible:

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

  10. #10
    Ext User skaue's Avatar
    Join Date
    Sep 2008
    Location
    Troms
    Posts
    191
    Vote Rating
    0
    skaue is on a distinguished road

      0  

    Default


    Quote Originally Posted by Condor View Post
    This is more flexible:

    Code:
    Ext.override(Ext.form.Field, {
       setFieldLabel : function(text) {
          this.el.up('.x-form-item', 10, true).child('.x-form-item-label').update(text);
       }
    });
    Tried out this, but "el" is undefined... "this" is afaik a valid textfield...

    What is el? I need to dynamically change the fieldLabel on a already created TextField