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-23 11:22:14Z

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, 2014 at 11:22

answered Jul 23, 2010 at 21:29

David Young

4,7932 gold badges23 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zango Over a year ago

Yes it works :) . Thank you very much, this is exact answer that I was looking for.

Juan Ramón · Accepted Answer · 2012-04-10 11:14:18Z

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, 2012 at 11:14

Juan Ramón

1881 gold badge2 silver badges10 bronze badges

1 Comment

Geo Over a year ago

This worked fine. However, how do I get the label value after that? Calling field.getFieldLabel() returns the OLD value :-/

Maruccio · Accepted Answer · 2011-11-16 19:57:41Z

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

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

NDM · Accepted Answer · 2013-09-12 08:34:48Z

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

Klors · Accepted Answer · 2015-11-03 13:59:43Z

5

With ExtJS 4.2 this works for me:

field.setFieldLabel('New Label');

edited Nov 3, 2015 at 13:59

Klors

2,6642 gold badges28 silver badges42 bronze badges

answered Jun 10, 2013 at 14:49

edinhow

511 silver badge2 bronze badges

1 Comment

David Lipschitz Over a year ago

or component.setFieldLabel('New Label'); eg in an Field's AfterRender event

mdml · Accepted Answer · 2013-12-06 14:41:52Z

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;

Collectives™ on Stack Overflow

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

6 Answers 6

1 Comment

1 Comment

Comments

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

1 Comment

Comments

Comments

1 Comment

Comments

Related