1. #1
    Sencha User tobiaspm's Avatar
    Join Date
    Dec 2007
    Posts
    6
    Vote Rating
    0
    tobiaspm is on a distinguished road

      0  

    Lightbulb Ext.form.field.Base component with setFieldLabel procedure (4.x)

    Ext.form.field.Base component with setFieldLabel procedure (4.x)


    Code:
    Ext.override(Ext.form.field.Base, {
        setFieldLabel: function($Label) {
            this.fieldLabel = $Label;
            Ext.get(this.getEl().query("label")[0]).update(this.fieldLabel+this.labelSeparator);
        }
    });

  2. #2
    Sencha User tobiaspm's Avatar
    Join Date
    Dec 2007
    Posts
    6
    Vote Rating
    0
    tobiaspm is on a distinguished road

      0  

    Default


    Code:
    Ext.override(Ext.form.field.Base, {
        setFieldLabel: function($Label) {
            this.fieldLabel = $Label;
            var $loc_Separator = this.labelSeparator;
            var $loc_Element = Ext.get(this.getEl().query("label")[0]);
            if(/after/.test($loc_Element.dom.className)) {
                $loc_Separator = "";
            }
            Ext.get(this.getEl().query("label")[0]).update(this.fieldLabel+$loc_Separator);
        }
    });

  3. #3
    Ext JS Premium Member NOSLOW's Avatar
    Join Date
    Feb 2008
    Location
    Morrisville, NC
    Posts
    162
    Vote Rating
    -1
    NOSLOW is an unknown quantity at this point

      0  

    Default


    Thanks for the v4 of this override. I'd been using a similar override in v3 that included
    Code:
    getFieldLabel
    .

    I see that they added
    Code:
    getFieldLabel
    method to the API in v4. It seems like an oversite that they didn't add
    Code:
    setFieldLabel
    as well.

    This is something that really should be part of the native API.

  4. #4
    Ext JS Premium Member NOSLOW's Avatar
    Join Date
    Feb 2008
    Location
    Morrisville, NC
    Posts
    162
    Vote Rating
    -1
    NOSLOW is an unknown quantity at this point

      0  

    Default


    Here's my version of this override which uses the "labelEl" property instead of a DOM query to find the label element:

    Code:
    Ext.override(Ext.form.Field.Base, {
        setFieldLabel : function(text) {
            var labelSeparator = ':';
            if (typeof this.labelSeparator !== 'undefined') {
                labelSeparator = this.labelSeparator;
            }
            var label = this.labelEl;
            if (label !== null) {
                label.update(text + labelSeparator);
            }
            }
     });

  5. #5
    Sencha User tobiaspm's Avatar
    Join Date
    Dec 2007
    Posts
    6
    Vote Rating
    0
    tobiaspm is on a distinguished road

      0  

    Default


    Thanks.

  6. #6
    Sencha User tobiaspm's Avatar
    Join Date
    Dec 2007
    Posts
    6
    Vote Rating
    0
    tobiaspm is on a distinguished road

      0  

    Default


    Final code:

    Code:
    // overrides
    Ext.override(Ext.form.field.Base, {
        // Hozzáadott kód
        setFieldLabel: function($Label) {
            var $loc_Separator = "";
            var $loc_Element = null;
    
            this.fieldLabel = $Label;
            if(Ext.isDefined(this.labelEl) && this.labelEl !== null) {
                $loc_Element = this.labelEl;
            }
            else {
                $loc_Element = Ext.get(this.getEl().query("label")[0]); // CheckBox boxLabel
            }
            $loc_Separator = (Ext.isDefined(this.labelSeparator)) ? this.labelSeparator : ":";
            if(/after/.test($loc_Element.dom.className)) {  // CheckBox boxLabel
                $loc_Separator = "";
            }
            if($loc_Element !== null) {
                $loc_Element.update(this.fieldLabel+$loc_Separator);
            }
        }
    });

  7. #7
    Sencha User
    Join Date
    Sep 2007
    Posts
    59
    Vote Rating
    0
    jamone is on a distinguished road

      0  

    Default Error in final code

    Error in final code


    Dear Gents, Thanks for the code, however I get an error with the following line of code:

    $loc_Element = Ext.get(this.getEl().query("label")[0]); // CheckBox boxLabel

    I get, "this.getEl() is undefined", I am using the latest version of Sencha 4.0.2a.

    Is anyone else getting this error? Is there a fix?

    Cheers

  8. #8
    Sencha User tobiaspm's Avatar
    Join Date
    Dec 2007
    Posts
    6
    Vote Rating
    0
    tobiaspm is on a distinguished road

      0  

    Default


    Hi jamone,

    Please write your code, which uses the setFieldLabel procedure.

    I have a 4.0.2 version works well.

    Thanks.

  9. #9
    Sencha User mberrie's Avatar
    Join Date
    Feb 2011
    Location
    Bangkok, Thailand
    Posts
    506
    Vote Rating
    14
    mberrie will become famous soon enough mberrie will become famous soon enough

      0  

    Default


    this.getEl() fails if the component is not rendered yet. The override can check for the this.rendered property and just update the fieldLabel property in this case.

  10. #10
    Sencha User
    Join Date
    Sep 2007
    Posts
    59
    Vote Rating
    0
    jamone is on a distinguished road

      0  

    Default


    I do not have any checkboxes in my code, just field labels.

    I have the following in my code, and I get the error.

    Ext.override(Ext.form.field.Base, {
    // Hozz?adott k?d
    setFieldLabel: function($Label) {
    var $loc_Separator = "";
    var $loc_Element = null;

    this.fieldLabel = $Label;
    if(Ext.isDefined(this.labelEl) && this.labelEl !== null) {
    $loc_Element = this.labelEl;
    }
    else {
    $loc_Element = Ext.get(this.getEl().query("label")[0]); // CheckBox boxLabel
    }
    $loc_Separator = (Ext.isDefined(this.labelSeparator)) ? this.labelSeparator : ":";
    if(/after/.test($loc_Element.dom.className)) { // CheckBox boxLabel
    $loc_Separator = "";
    }
    if($loc_Element !== null) {
    $loc_Element.update(this.fieldLabel+$loc_Separator);
    }
    }
    });

    TypeError: Result of expression 'this.getEl()' [undefined] is not an object.

    If I comment out the following:

    else {
    $loc_Element = Ext.get(this.getEl().query("label")[0]); // CheckBox boxLabel
    }
    $loc_Separator = (Ext.isDefined(this.labelSeparator)) ? this.labelSeparator : ":";
    if(/after/.test($loc_Element.dom.className)) { // CheckBox boxLabel
    $loc_Separator = "";
    }

    It works fine. I believe the code needs to check if the CheckBox is rendered and deal with it appropriately.

Similar Threads

  1. How to get a parent form of a field as a Component
    By asmdec in forum Ext 2.x: Help & Discussion
    Replies: 16
    Last Post: 25 Mar 2011, 10:43 AM
  2. customized field: how to add ext component above a field onRender?
    By bbimber in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 13 Jan 2011, 2:07 PM
  3. Form fieldlabel : button (or component) instead of text as field label
    By mailme_gx in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 14 Sep 2009, 11:20 PM
  4. Replies: 12
    Last Post: 29 Mar 2008, 11:11 PM

Thread Participants: 3

Tags for this Thread