Comment créer un champ initialement caché dans la mise en page de formulaire?

Question

Est-il possible de créer un champ dans une présentation de formulaire qui est initialement masquée (complètement, y compris l'étiquette de champ)?

Je ne veux pas appeler cmp.getEl().up('.x-form-item').setDisplayed [1] pour ces champs après le rendu car il provoque des scintillements et d'autres "effets".

[1] comme je sais que c'est la seule façon de masquer le champ de formulaire, y compris l'étiquette.

Answer 1

Bien sûr, créez une classe CSS dans votre document avec l'un ou l'autre (selon vos besoins) 'display: none' OU 'visibility': hidden. Appelez cette classe, disons, «classe invisible».

Créez une autre classe avec 'display: block', 'display: inline' OU 'visibility: visible' et appelez cette classe say, 'visible-class'.

Pour le champ de formulaire que vous souhaitez être invisible lorsque son rendiez vous définiriez ses «cls de la propriété de « classe invisible », à savoir:

cls:'invisible-class' 

Et quand vous voulez que le champ soit visible, utiliser la méthode:

addCls('visible-class') 

ALTERNATIVELY- lorsque vous voulez faire l'objet d'une utilisation visible la méthode:

removeCls('invisible-class') 

c'est-à-dire mycomponent.removeClass ('classe invisible')

Espérons que cela aide!

Answer 2

Vous pouvez paramétrer le xtype du champ de formulaire sur caché. Ainsi, vous aurez quelque chose comme ceci:

{ 
id:'my_field_id', 
name: 'my_field_name', 
xtype: 'hidden' 
} 

Vous pouvez ajouter le champ comme ceci:

Ext.getCmp("myFormPanel").add({ 
    id:'my_field_id', 
    name: 'my_field_name', 
    xtype: 'textfield' 
    }); 
Ext.getCmp("myFormPanel").doLayout(); 

Et l'enlever comme ceci:

Ext.getCmp("myFormPanel").remove(Ext.getCmp("my_field_id")); 
Ext.getCmp("myFormPanel").doLayout(); 

J'espère que c'est ce que tu veux.

Answer 3

Une méthode plus simple si vous avez juste besoin de masquer ce seul champ et son étiquette de champ serait de créer un objet label séparé pour celui-ci. Il pourrait être plus facile de simplement cacher l'étiquette au lieu de traiter le CSS pour cacher le fieldLabel.

Vous pourriez être en mesure d'ajouter un écouteur au cas de rendre le panneau de gestion mise en page pour faire quelque chose comme ça ...

var = cmp Ext.getCmp (fieldID);

if((cmp.hidden) && cmp.previousSibling() != null) 
    && (cmp.previousSibling().xtype =='label'){ 
    cmp.previousSibling().hide(); 
}