Remplir programmatiquement un TableContainer au format HTML

Version imprimable

Bonjour

J'ai un soucis avec mon code : j'aimerais remplir une ligne TableContainer (table existante créée en HTML) de 5 colonnes après un clic de l'utilisateur sur un lien (ou bouton, à voir après, mais ce n'est pas le soucis).

Ma fonction "addSearchLine" devrait le permettre. Seulement j'ai l'impression que l'ajout ne se fait pas dans le TableContainer (sous forme de colonnes, en dessous de l'entête), mais en dessous de la table.

Voici les codes :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<A HREF="javascript:addSearchLine('searchDocsTab');">Ajouter</A>
<div dojoType="dojox.layout.TableContainer" cols="5" id="searchDocsTab" jsid="searchDocsTab">
 
<div dojoType="dojox.layout.ContentPane">Col1</div>
<div dojoType="dojox.layout.ContentPane">Col2</div>
<div dojoType="dojox.layout.ContentPane">Col3</div>
<div dojoType="dojox.layout.ContentPane">Col4</div>
<div dojoType="dojox.layout.ContentPane"></div>
 
<script type="text/javascript">
    dojo.addOnLoad(function() {
		// Ajout auto de la première ligne
		addSearchLine('searchDocsTab');
	});
</script>
 
</div>
</div>

Côté fonctions JS (présent avant le code HTML) :

Code:

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<script type="text/javascript">
 
	var nSrcLine = 0;
 
	function addSearchLine(formLine)
	{
		var tab = dijit.byId(formLine);
		if (!tab)
		{
			tab = new dojox.layout.TableContainer({
					cols: 3,
					id: formLine
				},
				dojo.byId("searchDocsBar"));
		}
 
		nSrcLine++;
		var num = nSrcLine;
		var objSel = new dijit.form.FilteringSelect({id: 'selFld'+num,
            name: 'selFld'+num,
			store: storeFlds,  // Store rempli ultérieurement
			autoComplete: true,
            searchAttr: "name"});
		tab.addChild(objSel);
 
		var objSel = new dijit.form.TextBox({id: 'srchFld'+num,
            name: 'srchFld'+num});
		tab.addChild(objSel);
 
		var objSel = new dijit.form.TextBox({id: 'typFld'+num,
            name: 'typFld'+num,
			disabled: 'true',
			style: 'width: 50px !important'});
		tab.addChild(objSel);
 
		var objSel = new dijit.form.TextBox({id: 'srchFld2'+num,
            name: 'srchFld2'+num});
		tab.addChild(objSel);
 
		var objSel = new dijit.form.Button({id: 'srchMin'+num,
            name: 'srchMin'+num,
			label: ' - ',
			width: '50px',
			style: 'width: 50px !important, minWidth: 50px !important',
			onClick: function() {
                delSearchLine(formLine, num);
            }});
		tab.addChild(objSel);
 
		tab.startup();
	}
 
	function delSearchLine(formLine, num)
	{
		dijit.byId('selFld'+num).destroy();
		dijit.byId('srchFld'+num).destroy();
		dijit.byId('typFld'+num).destroy();
		dijit.byId('srchFld2'+num).destroy();
		dijit.byId('srchMin'+num).destroy();
	}
 
</script>

Merci d'avance

Re ;) ,

Effectivement c'est un peu tordu: le addChild est très mal géré ici, il ajoute l'élément sous la forme d'un simple appendChild, en bref à la suite de la table... Modifie ton code pour le forcer à tenir compte des nouveaux enfants:
Code:

1 2 3 4 5 6 7 8 9 //attention, tab.startup() n'aura aucun impact si le composant a déjà été chargé; uniquement en cas de création if(! tab._started) { tab.startup(); } else { tab.resize(); tab.layout(); }
ERE

30/04/2010, 17h07
Vow

Que dire... Tu es le meilleur :)

Je pense qu'il faut aussi rajouter la même ligne à la fin de la fonction delSearchLine.

Merci en tout cas ;)

Je n'avais pas fait attention à cette fonction.
Mais elle devrait plutôt passer par la gestion du container dijit afin qu'il tienne à jour les éléments enfants encore actifs, soit quelque chose comme:
Code:

1 2 3 4 5 6 7 8 9 10 11 function delSearchLine(formLine, num) { var tab = dijit.byId(formLine); tab.removeChild(dijit.byId('selFld'+num)); tab.removeChild(dijit.byId('srchFld'+num)); ... //on met à jour tab.resize(); tab.layout(); }
Et puis tu peux même faire plus élégant:
Code:

1 2 3 4 5 6 7 dojo.extend(dojox.layout.TableContainer, { refresh: function() { this.resize(); this.layout() }; }
et remplacer les doubles appels par un simple refresh. De là à faire la même chose avec le addChild (en proposant d'ajouter d'un bloc un tableau d'éléments) il n'y pas loin...

ERE

30/04/2010, 17h49
Vow

D'accord :)
Merci encore !