web-dev-qa-db-fra.com

Extjs change fieldLabel après le rendu du champ. Une meilleure solution?

J'ai examiné comment ExtJs rend les champs du formulaire en mode dom. Pour changer fieldLabel après que le champ soit rendu, je trouve le bon élément dom et modifie son 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);
javascriptextjs
18
Zango

L'accès au dom pour modifier dynamiquement les étiquettes de champs était antérieur à la version 3.0.1

Après 3.0.1 je crois que cela fonctionne

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

Vous ne pouvez le faire qu'une fois le champ rendu.

22
David Young

Si vous souhaitez ajouter une étiquette avec HTML, la meilleure solution pour ExtJs 4 est d'utiliser la méthode update (la méthode update est dans labelEl et non dans label):

field.labelEl.update ('Nouvelle étiquette');

12
Juan Ramón

impossible de trouver la propriété label dans un objet de champ dans Ext 4 à la place, cela a fonctionné pour moi:

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

Avec ExtJS 4.2, cela fonctionne pour moi:

field.setFieldLabel('New Label');

4
edinhow

Je viens de rencontrer le même problème, mais dans ma situation, les étiquettes pourraient déjà être restituées, ou non. j'ai donc dû couvrir les deux cas:

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

Je l'ai testé dans ExtJS 3.2

2
NDM

Dans Extjs 3.4.0, la première ligne de la fonction ne fonctionne pas.

Remplacez par ceci:

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