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

[tobiaspm]

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

[tobiaspm]

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);
    }
});

[NOSLOW]

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

getFieldLabel

.

I see that they added

getFieldLabel

method to the API in v4. It seems like an oversite that they didn't add

setFieldLabel

as well.

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

[NOSLOW]

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

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);
        }
        }
 });

[tobiaspm]

Thanks.

[tobiaspm]

Final 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);
        }
    }
});

[jamone]

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

[tobiaspm]

Hi jamone,

Please write your code, which uses the setFieldLabel procedure.

I have a 4.0.2 version works well.

Thanks.

[mberrie]

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.

[jamone]

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.