Discussion :

[mysterty]

Bonjour

J'essaye de faire un formulaire dynamique avec possibilité d'ajouter des relations à la volée (par exemple, pouvoir ajouter autant d'auteur que l'on veut à un article).

J'ai actuellement une jolie fonction qui fonctionne très bien pour les champs input classiques et les champs avec date-picker:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
addRelation = function(_caller) {
	var parentFieldset = Ext.getCmp($('#'+_caller.id).prev('fieldset').attr('id'));
	var prevFieldset = $('#'+_caller.id).prev('fieldset').find('fieldset:last');
	prevFieldset = Ext.getCmp(prevFieldset.attr('id'));
	nextFieldset = prevFieldset.cloneConfig();
	nextFieldset.cascade(changeId);
	parentFieldset.add(nextFieldset);
	parentFieldset.doLayout();
}
/**
 * Function avoiding id's dupplication
 */
function changeId(_target) {
	if(_target.autoCreate !== undefined) {
		_target.autoCreate.id = Ext.id();
		var nameRE = new RegExp('\\[(\\d+)\\]');
		var matches = nameRE.exec(this.name);
		var tmp = _target.autoCreate.name;
		_target.autoCreate.name = tmp.replace(nameRE, '['+(parseInt(matches[1],10)+1)+']');
	}
}

Par contre, même si on voit bien les nouveaux champs de type combobox de ext s'afficher, on ne voit pas leurs données ! Impossible d'avoir la liste déroulante avec les options.

La liste n'est même pas générée à la fin du body comme elle l'est avec les combobox qui sont initialement créés.

Existe-t-il un moyen de les faire fonctionner ?

Je trouve ça étrange qu'un framework aussi puissant ne gère pas ce genre de cas de figure

Merci d'avance pour votre aide !

[mysterty]

Alors, j'ai finalement trouvé comment dupliquer les stores, mais par contre, j'ai un problème au niveau des id !

Voilà mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
addRelation = function(_caller) {
	var parentFieldset = Ext.getCmp($('#'+_caller.id).prev('fieldset').attr('id'));
	var prevFieldset = $('#'+_caller.id).prev('fieldset').find('fieldset:last');
	prevFieldset = Ext.getCmp(prevFieldset.attr('id'));
	nextFieldset = prevFieldset.cloneConfig();
	nextFieldset.cascade(prepareFields);
	parentFieldset.add(nextFieldset);
	parentFieldset.doLayout();
}
/**
 * Function preparing fields dupplication
 */
function prepareFields(_target) {
	// prepare increment
	var nameRE = new RegExp('\\[(\\d+)\\]');
	var matches = '';
	var tmpName = '';
	// Copy store for combo boxes
	if(_target.store !== undefined) {
		var oldField = $("input[name='"+_target.name+"']:first").next("input");
		oldField = Ext.getCmp(oldField.attr('id'));
		var records = [];
		oldField.store.each(function(r){
			records.push(r.copy());
		});
		var newStore = new Ext.data.Store({
			recordType: oldField.store.recordType
		});
		newStore.add(records);
		_target.store = newStore;
		tmpName = _target.hiddenName;
		matches = nameRE.exec(tmpName);
		_target.name = _target.hiddenName = tmpName.replace(nameRE, '['+(parseInt(matches[1],10)+1)+']');
	}
	// Change id for auto created fields
	if(_target.autoCreate !== undefined) {
		_target.autoCreate.id = Ext.id();
		tmpName = _target.autoCreate.name;
		matches = nameRE.exec(_target.autoCreate.name);
		_target.autoCreate.name = tmpName.replace(nameRE, '['+(parseInt(matches[1],10)+1)+']');
	}
}

Les ids vont maintenant bien être incrémenter pour les champs autre que combobox, mais pas pour les combobox donc... En fait, _target.name va toujours renvoyer "objet[6][property]", même si je le change effectivement en "objet[7][property]".

Par exemple, si j'ai initialement 2 objets et que j'en ajoute, ça va me donner une liste du genre :
object[0][property]
object[1][property]
object[2][property] // j'ajoute un premier objet dynamiquement, son nom dans le html est correctement incrémenté et affiché
object[2][property] // si j'en ajoute un second, son nom de départ est toujours "object[1][property]", etc

Quelqu'un aurait une idée d'où ça pourrait venir ?

[mysterty]

Comme ça m'agace un peu et que il faut bien que ça fonctionne pour l'instant, je me contente de compter le nombre de champs existant pour l'attribuer en temps qu'id:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var nbFieldset = oldField.parents('fieldset').parents('fieldset').find('fieldset').length;
// ...
_target.name = _target.hiddenName = tmpName.replace(nameRE, '['+nbFieldset+']');

Mais je trouve ça dommage, car ça oblige à masquer les champs "supprimer" au lieu de les enlever du DOM (ce que personnellement je préfère de toute façon mais bon, quand même)...

Si quelqu'un passe par là et peu me dire pourquoi le name et le hiddenName ne sont pas vraiment changer, ça m'arrangerai

En attendant, j'espère que mes pérégrinations aideront quelqu'un qui sera confronté au même problème