Extjs change fieldLabel after field is rendered. Any better solution?

Question

I examined how ExtJs renders form's fields in dom. To change fieldLabel after field is rendered I find proper dom element and change its innerHTML;

/**
* Modifies field's label afrer field is rendered.
*
* @param {object} field
*    Some object that directly or indirecty extends Ext.form.Field
* @param {String} label
*    New value for field's label.
*/
function setLabel(field,label){
    var el = field.el.dom.parentNode.parentNode;
    if( el.children[0].tagName.toLowerCase() === 'label' ) {
        el.children[0].innerHTML =label;
    }else if( el.parentNode.children[0].tagName.toLowerCase() === 'label' ){
    el.parentNode.children[0].innerHTML =label;
    }
    return setLabel; //just for fun
}

//EXAMPLE:
var win = new Ext.Window({
    height : 200,
    width : 300,
    layout : 'form',
    labelAlign : 'right',
    items : [{
        xtype : 'textfield',
        fieldLabel : 'name',
        ref : 'f',
        html : 'asdf'
    },{
        xtype : 'datefield',
        fieldLabel : 'date',
        ref : 'd'
    },{
        xtype : 'combo',
        fieldLabel : 'sex',
        ref : 'c',
        store : [[1,"male"],[2,"female"]]
    },{
        xtype : 'radio',
        fieldLabel : 'radio',
        ref : 'r'
    },{
        xtype : 'checkbox',
        fieldLabel : "checkbox",
        ref : 'ch'
    }]
}).show()

setTimeout(function(){
   setLabel(win.f,'Last Name')(win.d,'Birth Date')(win.c,'Your Sex')(win.r,'jus radio')(win.ch,'just checkbox');
},3000);

David Young · Accepted Answer · 2014-01-23T11:22:14.993

23

Accessing the dom to dynamically change fieldLabels was pre 3.0.1

After 3.0.1 I believe this works

field.labelEl.update('New label');

You can only do this once the field has been rendered.

edited Jan 23 '14 at 11:22

answered Jul 23 '10 at 21:29

David Young

4,643
2
21
18

Yes it works :) . Thank you very much, this is exact answer that I was looking for. – Zango Jul 23 '10 at 21:52

score 12 · Answer 2 · answered Apr 10 '12 at 11:14

12

If you want to add a label with HTML the best solution for ExtJs 4 is with update method (update method is in labelEl, not in label):

field.labelEl.update('New label');

answered Apr 10 '12 at 11:14

Juan Ramón

188
1
2
10

This worked fine. However, how do I get the label value after that? Calling field.getFieldLabel() returns the OLD value :-/ – Geo May 28 '13 at 17:31

score 5 · Answer 3 · edited Nov 03 '15 at 13:59

5

With ExtJS 4.2 this works for me:

field.setFieldLabel('New Label');

edited Nov 03 '15 at 13:59

Klors

2,665
2
25
42

answered Jun 10 '13 at 14:49

edinhow

51
1
2

or component.setFieldLabel('New Label'); eg in an Field's AfterRender event – David Lipschitz Oct 04 '21 at 11:13

score 5 · Answer 4 · answered Sep 12 '13 at 08:34

I've just come across the same issue, but in my situation the labels could already be rendered, or not. so I had to cover both cases:

var newLabel = 'new label';
if (!field.rendered) field.fieldLabel = newLabel;
else field.label.update(newLabel);

I tested it in ExtJS 3.2

score 5 · Answer 5 · answered Nov 16 '11 at 19:57

5

couldn't find label property in a field object in Ext 4 instead this worked for me:

field.labelEl.dom.innerText = 'New Label';

answered Nov 16 '11 at 19:57

Maruccio

509
1
6
14

score 0 · Answer 6 · edited Dec 06 '13 at 14:41

0

In Extjs 3.4.0, the first line in the function doesn't work.

Replace with this:

//var el = field.el.dom.parentNode.parentNode;
var el = Ext.getCmp(field).getEl().dom.parentNode.parentNode;

edited Dec 06 '13 at 14:41

mdml

22,442
8
58
66

answered Dec 06 '13 at 14:16

Exe

1

Extjs change fieldLabel after field is rendered. Any better solution?

6 Answers6