Discussion :

[Vow]

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 :

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
<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 :

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
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

[emmanuel.remy]

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 :

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

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

[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

[emmanuel.remy]

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 :

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

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 :

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

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

[Vow]

D'accord
Merci encore !