Javascript 呈现字段后，Extjs 更改 fieldLabel。有什么更好的解决办法吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3322332/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Extjs change fieldLabel after field is rendered. Any better solution?
提问by Zango
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;
我检查了 ExtJs 如何在 dom 中呈现表单的字段。要在呈现字段后更改 fieldLabel，我会找到合适的 dom 元素并更改其 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);
回答by David Young
Accessing the dom to dynamically change fieldLabels was pre 3.0.1
访问 dom 以动态更改 fieldLabels 是 3.0.1 之前的版本
After 3.0.1 I believe this works
在 3.0.1 之后，我相信这有效
field.labelEl.update('New label');
You can only do this once the field has been rendered.
您只能在渲染字段后执行此操作。
回答by Juan Ramón
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):
如果要使用 HTML 添加标签，ExtJs 4 的最佳解决方案是使用更新方法（更新方法在 labelEl 中，而不是在标签中）：
field.labelEl.update('New label');
field.labelEl.update('新标签');
回答by Maruccio
couldn't find label property in a field object in Ext 4 instead this worked for me:
在 Ext 4 的字段对象中找不到标签属性，这对我有用：
field.labelEl.dom.innerText = 'New Label';
回答by edinhow
With ExtJS 4.2 this works for me:
使用 ExtJS 4.2 这对我有用：
field.setFieldLabel('New Label');
field.setFieldLabel('New Label');
回答by NDM
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
我在 ExtJS 3.2 中测试过
回答by Exe
In Extjs 3.4.0, the first line in the function doesn't work.
在 Extjs 3.4.0 中，函数中的第一行不起作用。
Replace with this:
替换为：
//var el = field.el.dom.parentNode.parentNode;
var el = Ext.getCmp(field).getEl().dom.parentNode.parentNode;
