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);
FieldLabelsを動的に変更するためのDOMへのアクセスは3.0.1より前でした
3.0.1以降これは機能すると思います
field.labelEl.update('New label');
これは、フィールドがレンダリングされた後でのみ実行できます。
HTMLでラベルを追加したい場合、ExtJs 4の最良の解決策はupdateメソッドを使用することです(updateメソッドはlabelではなくlabelElにあります):
field.labelEl.update( '新しいラベル');
ext 4のフィールドオブジェクトでlabelプロパティを見つけることができませんでしたが、代わりにこれは私のために働きました:
field.labelEl.dom.innerText = 'New Label';
ExtJS 4.2では、これは私にとってはうまくいきます。
field.setFieldLabel('New Label');
同じ問題が発生したばかりですが、私の状況では、ラベルが既にレンダリングされているかどうかはわかりません。だから私は両方のケースをカバーしなければなりませんでした:
var newLabel = 'new label';
if (!field.rendered) field.fieldLabel = newLabel;
else field.label.update(newLabel);
ExtJS3.2でテストしました
Extjs 3.4.0では、関数の最初の行が機能しません。
これに置き換えます:
//var el = field.el.dom.parentNode.parentNode;
var el = Ext.getCmp(field).getEl().dom.parentNode.parentNode;