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

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..."