J'ai plusieurs formulaires qui commencent tous par les mêmes champs "universels" mais qui ont ensuite des champs différents selon le formulaire. En tant que tel, j'ai un formulaire parent à partir duquel tous les formulaires enfants sont étendus. Le formulaire parent ajoute les champs universels pour que je n'ai pas à déclarer à nouveau ces champs dans les formulaires enfants.
Le problème que je rencontre est que lorsque j'ai plusieurs instances du même formulaire enfant, ces champs universels sont ré-ajouté pour chaque instance. Cela peut sembler un peu déroutant, mais je pense que le violon suivant devrait être assez clair: https: // fiddle.sencha.com/#fiddle/36lu&view/editor . De toute évidence, je ne fais pas cela correctement, alors j'essaie simplement de comprendre ce que je fais de mal.
Code pour les classes parent / enfant:
Ext.define('TestParentForm', {
extend: 'Ext.form.Panel',
xtype: 'testparentform',
initComponent: function(){
var me = this;
if(!me.items){
me.items = [];
}
Ext.Array.insert(me.items, 0, [
{
xtype: 'textfield',
fieldLabel: 'Universal Parent Field'
}
]);
me.callParent(arguments);
}
});
Ext.define('TestChildForm', {
extend: 'TestParentForm',
xtype: 'testchildform',
items: [
{
xtype: 'textfield',
fieldLabel: 'Child-specific Field'
}
]
});
p >
3 Réponses :
La bonne façon de procéder n'est peut-être pas héritage , mais définissez un Panel avec ces champs par défaut, puis ajoutez-le comme élément le plus haut des formulaires enfants; cela peut également être fait avec xtype . Mais honnêtement, pour deux champs de texte simples, je ne voudrais même pas déconner, par souci de simplicité (l'imbrication de si petits bits n'améliore pas la lisibilité). S'il s'agissait de quelques éléments de plus et d'un peu plus complexe, l'imbrication pourrait plutôt être une chose. L'utilisation de l'héritage dans ce cas aurait beaucoup plus de sens, si la forme principale avait par exemple. méthodes de validation personnalisées, que les formulaires enfants utilisent également - mais comme le montre le violon, lorsqu'il a des composants d'interface utilisateur, il se comporte de la même manière que lors de l'extension de la classe. Astuce: ExtJS facilite la liaison du formulaire au modèle, ce qui peut réduire la quantité de code nécessaire dans le cas contraire.
Vous pouvez utiliser la méthode Ext.Array.merge (arr0, arr1 ..).
Ext.define('TestParentForm', {
extend: 'Ext.form.Panel',
xtype: 'testparentform',
initComponent: function () {
this.items = Ext.Array.merge(
[{
xtype: 'textfield',
fieldLabel: 'Universal Parent Field'
}],
this.items
);
this.callParent(arguments);
}
});
Et quel est l'intérêt de le fusionner dans le formulaire parent, en particulier lorsque this.items n'a jamais été défini auparavant? S'il s'agissait de l'une des formes enfants, cela semblerait plutôt fonctionner.
J'ai ajouté un enfant 3ème sans aucun champ et propriété d'éléments console.log-ed après callParent. Regardez à nouveau le violon. Comme vous pouvez le voir, la propriété items (Ext.util.ItemCollection) ne contient pas de valeur nulle ou indéfinie, même lorsque this.items n'a pas été défini auparavant. Cela signifie qu'il n'est pas nécessaire de vérifier si les éléments sont définis avant ou non. Votre idée est également bonne, mais personnellement, je préférerais Ext.form.FieldSet ou FieldContainer, et évitez de mettre un sous-panneau dans le panneau.
J'ai résolu ce problème en définissant des éléments dans la classe enfant à l'aide de la fonction initComponent. Voir violon ici: https://fiddle.sencha.com/#fiddle/36nn&view/editor Ext.define('TestParentForm', {
extend: 'Ext.form.Panel',
xtype: 'testparentform',
initComponent: function(){
var me = this;
if(!me.items){
me.items = [];
}
Ext.Array.insert(me.items, 0, [
{
xtype: 'textfield',
fieldLabel: 'Universal Parent Field'
}
]);
me.callParent(arguments);
}
});
Ext.define('TestChildForm', {
extend: 'TestParentForm',
xtype: 'testchildform',
initComponent: function(){
var me = this;
me.items = [{
xtype: 'textfield',
fieldLabel: 'Child-specific Field'
}];
me.callParent(arguments);
}
});