How to dynamically change a fieldLabel in extJs3

Question

Form fields don't seem to have an update method for the fieldLabel which can be only set as a constructor property.

{
    xtype:          'textfield',
    fieldLabel:     'Field Label Text',
    width:          465,
    name:           'field_1',
    id:             'field_1',
    labelSeparator: '',
    allowBlank:     false,
    value:          ''
}

I've managed to change it by:

var field = Ext.getCmp("field_1");
field.el.parent().parent().dom.children[0].innerHTML = "new Label"

But it feels kinda hack-ish.

Is there a proper way of changing the label?

---

Note: I know extJs3 is ancient history, but the project I'm working on is still using this version.

Answer 1

Just override the Field class to add a setFieldLabel method like below and then use

fieldObj.setFieldLabel('New Label');

anywhere in your application.

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

Cheers !