Extjs 在字段渲染后更改 fieldLabel。有更好的解决方案吗？答案

【问题标题】：Extjs change fieldLabel after field is rendered. Any better solution?Extjs 在字段渲染后更改 fieldLabel。有更好的解决方案吗？
【发布时间】：2015-11-03 21:59:43
【问题描述】：

我研究了 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);

【问题讨论】：

标签： javascript extjs

【解决方案1】：

访问 dom 以动态更改 fieldLabels 是 3.0.1 之前的版本

在 3.0.1 之后我相信这行得通

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

您只能在字段被渲染后执行此操作。

【讨论】：

是的，它有效:)。非常感谢，这是我正在寻找的确切答案。

【解决方案2】：

如果你想用 HTML 添加标签，ExtJs 4 的最佳解决方案是使用更新方法（更新方法在 labelEl 中，而不是在标签中）：

field.labelEl.update('新标签');

【讨论】：

这很好用。但是，之后如何获取标签值？调用 field.getFieldLabel() 返回旧值：-/

【解决方案3】：

在 Ext 4 的字段对象中找不到标签属性相反，这对我有用：

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

【讨论】：

【解决方案4】：

我刚刚遇到了同样的问题，但在我的情况下，标签可能已经呈现，也可能没有。所以我必须涵盖这两种情况：

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

我在 ExtJS 3.2 中对其进行了测试

【讨论】：

【解决方案5】：

使用 ExtJS 4.2 这对我有用：

field.setFieldLabel('New Label');

【讨论】：

或 component.setFieldLabel('New Label');例如在字段的 AfterRender 事件中

【解决方案6】：

在 Extjs 3.4.0 中，函数的第一行不起作用。

替换为：

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

【讨论】：