BorderContainer et ExpandoPane

**Vow** · 18/03/2010, 10h01

Bonjour

De retour pour de nouvelles aventures... et surtout de nouvelles questions

Je souhaite diviser ma page "centrale" en 3 parties :
- le haut : barre d'outils et panneau de recherche
- le milieu : tableau de données
- le bas : rien

Voici ce que j'ai fait :

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
<script type="text/javascript">
	dojo.require("dijit.layout.BorderContainer");
	dojo.require("dojox.layout.ContentPane");
	dojo.require("dojo.parser");  
</script>
 
<!-- Reste du code -->
 
<div dojoType="dijit.layout.BorderContainer" design="screenDesign" style="border: 0px; padding: 0px; margin: 0px; width: 100%; height: 100%;">
<div dojoType="dijit.layout.ContentPane" region="top" HEIGHT=200 style="border: 0px; padding: 0px; margin: 0px; padding-top: 5px; padding-left: 100px; background-color: #F0F0F5; height: 100px;">
Contenu haut
</div>
<div dojoType="dijit.layout.ContentPane" region="center" HEIGHT=300 style="border: 0px; padding: 0px; margin: 0px; padding-top: 5px; padding-left: 30px; background-color: #F0F0F5; height: 300px;">
<TABLE style="border: 0px; padding: 0px; margin: 0px; width: 100%; height: 100%;">
<TR>
<TD BGCOLOR=WHITE HEIGHT=300 STYLE="border-bottom: 2px solid #CECECE; border-right: 2px solid #CECECE; padding: 10px 25px 10px 25px; ">
Contenu milieu
</TD>
</TD>
</TABLE>
</div>
<div dojoType="dijit.layout.ContentPane" region="bottom" style="border: 0px; padding: 0px; margin: 0px; padding-top: 5px; padding-left: 100px; background-color: #F0F0F5;">
Contenu bas
</div>
</div>

Seulement, j'ai deux soucis rien qu'à ce niveau :
- j'aimerais ne pas avoir de bordure "blanche"
- je voudrais que ma partie haute s'agrandisse automatiquement par rapport au contenu, que ma partie centrale ait une taille minimale et puisse s'agrandir suivant son contenu, et que la partie basse prenne le reste de la page.

Pour ce dernier point, voici le fonctionnement actuel :
- la partie haute a une taille fixe et s'il y a déplacement, la propriété CSS overlay est activée (ascenseurs)
- la partie basse prend une place infime et la partie centrale prend le reste...

La seconde partie de mon problème est que je voudrais placer une sorte d'AccordeonPane... avec un seul "panneau" qui serait automatiquement fermée. C'est là où j'ai trouvé l'ExpandoPane et surtout peu d'explications.

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
<script type="text/javascript">
	dojo.require("dojox.layout.ExpandoPane");
	dojo.require("dojo.fx.easing");
</script>
 
<!-- Reste du code -->
 
<div gutters="true" dojoType="dijit.layout.BorderContainer" autoHeight="true">
&nbsp;
 
	<div dojoType="dojox.layout.ExpandoPane" 
		splitter="false"
		duration="125" 
		region="bottom" 
		title="Recherche" 
		maxHeight="200px"
		startExpanded="false"
		autoHeight="true"
		style="height: 10px" >
 
Formulaire de recherche dynamique
	</div>
</div>

Les problèmes de cette partie sont :
- le DIV n'est pas un bloc (il peut se placer au dessus d'autres éléments comme du texte dans la même zone, voire déborder sur le bloc inférieur)
- Le titre n'apparaît pas lorsque l'ExpandoPane est fermé

Merci d'avance

PS : Je suis toujours en Dojo 1.4.1.

**vermine** · 18/03/2010, 10h09

Bonjour,

Pour la seconde partie, ce que vous appelez "titre", c'est :

Code :

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

1
2
 
Formulaire de recherche dynamique

Ou bien:

Code :

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

1
2
 
title = "Recherche"

?

Si c'est le premier cas, je trouve ça normal, non ? Il ferme l'ensemble de la balise div.
Si c'est le second cas, c'est un souci HTML. div vide = pas de "pixel div". Donc pas de passage de la souris, et pas de title.
Si c'est autre chose, et bien tant pis.

**Vow** · 18/03/2010, 10h28

Bonjour

Je parlais bien du title, pas du contenu.
Le div apparaît bien sauf qu'il n'y a pas le title, comme lorsqu'il est en mode "ouvert".

**vermine** · 18/03/2010, 10h50

Quand vous dites que le div apparait, vous voyez quoi ?

Code :

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

1
2
 
Formulaire de recherche dynamique

?

Si il n'y a pas de contenu, le title ne se lancera pas. Je ne connais pas l'ExpandoPane donc je ne visualise pas bien ce que vous entendez par "il est fermé, il est ouvert". Et si vous placiez le title sur le div parent ?

Bref, je ne sais pas vous aider.

**Vow** · 18/03/2010, 11h04

Si le panel s'ouvre, on voit le titre en haut de page puis le contenu en dessous (dans mon exemple, il s'agit de "Formulaire de recherche dynamique")

Des exemples d'ExpandoPane :
http://www.cookyz.fr/js_base/release...Pane_prog.html
(il s'agit des panels de droite et de gauche)

En tout cas, merci d'avoir essayé

**vermine** · 18/03/2010, 11h40

Juste un dernier test et puis je me tais.

Enlevez "Formulaire de recherche dynamique" et ouvrez le panel. Est-ce que le title apparait ?

**Vow** · 18/03/2010, 12h12

Donc :
- le test du title dans le BorderContainer ne change rien
- enlever le contenu non plus (sauf qu'il n'y a plus le texte

)

**Vow** · 22/03/2010, 09h23

Jeudi et vendredi, j'ai réussi à résoudre une partie de mes problèmes : la bordure blanche était en rapport avec le style Nihilo.

Ensuite mon plus grand problème est vraiment de trouver un moyen d'auto-redimensionner la hauteur des ContentPanel suivant leur contenu et ne pas mettre d'ascenseur

Je pense sinon que l'ExpandoPane en mode fermé ne peut pas avoir de titre.

J'ai vraiment du mal à me repérer dans les diverses classes CSS de Dojo : je n'ai pas trouvé de guide à ce propos. Vous en connaissez un ?

**Vow** · 22/03/2010, 16h51

Bon... j'ai résolu mon problème d'ExpandoPane par un... TitlePane...
C'est exactement ce que je voulais, mais je ne connaissais pas. Perdre autant de temps pour une connerie.

Maintenant il me reste plus qu'à trouver comment agrandir dynamiquement la hauteur des ContentPane... Si vous avez des idées, j'en serais ravi

**emmanuel.remy** · 23/03/2010, 18h33

Salut,

3 observations:

le Titlepane hérite du contentPane donc tu n'as pas besoin d'utiliser un ContentPane; tu peux directement mettre ton code "dedans"
Le ContentPane va adapter sa taille automatiquement au contenu
Si tu as besoin de redimensionner en dur un ContentPane, alors tu peux utiliser la methode resize; pour être complet, techniquement tout widget qui hérite de dijit.layout._LayoutWidget dispose de cette méthode... ce qui n'est pas le cas du ContentPane (étrangement, pas d'héritage de _LayoutWidget); mais le ContentPane la redéfinit. Ouf.

ERE

**Vow** · 24/03/2010, 17h48

Bonjour Emmanuel

Oui je savais pour le Titlepane, mais merci

D'ailleurs voici en gros ce qui a été fait.

Code :

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

1
2
3
4
5
<div jsid="searchDocsBar" id="searchDocsBar" dojoType="dijit.TitlePane" autoHeight="true" title="Recherche de documents" open="false" >
 
....
 
</div>

Ensuite pour le second et troisième point, en effet, les 3 ContentPanes du BorderContainer s'adaptent au contenu, si on veut. Mal en tout cas (par rapport à ce que je veux).
Ce que je veux dire : j'aimerais que le contenu du haut soit prioritaire, le bas ne soit pas écrasé par le "pas contenu" du milieu, et donc que le milieu soit ajusté automatiquement ; le contenu ne changeant pas d'hauteur après chargement sur ces deux Panels.
A ce propos, le contenu du haut peut changer de taille par rapport à l'ouverture du TitlePane... mais je n'ai pas bien compris comment utiliser la méthode resize

Voic un peu le contenu (falsifié) de 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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<div dojoType="dijit.layout.BorderContainer" gutters="false" design="screenDesign" style="border: 0px; padding: 0px; margin: 0px; width: 100%; height: 100%;">
<div dojoType="dijit.layout.ContentPane" region="top" style="border: 0px; padding: 0px; margin: 0px; padding-top: 5px; padding-left: 100px; background-color: #F0F0F5;">
1098 documents (150 affichés)
 
<script type="text/javascript">
	dojo.require("dijit.form.Button");
	dojo.require("dijit.TitlePane");
 
 
	//Sélectionnez vos critères  Valeur recherchée  Format   Compris entre* 
 
	function addSearchLine(formLine, num)
	{
		var objSel = document.createElement("SELECT");
		objSel.id = 'selFld'+num;
		objSel.name = objSel.id;
 
		// Champs dynamiques (PHP)
		var objOpt;
		objOpt = document.createElement("OPTION");
		objOpt.value = 'Nom_Prenom';
		objOpt.innerHTML = 'Nom_Prenom';
		objSel.appendChild(objOpt);
		objOpt.value = 'Date_Entree';
		objOpt.innerHTML = 'Date_Entree';
		objSel.appendChild(objOpt);
 
		formLine.appendChild(objSel);
 
		objSel = document.createElement("INPUT");
		objSel.id = 'srchFld'+num;
		objSel.name = objSel.id;
		formLine.appendChild(objSel);
	}
 
</script>
 
<BR>
<button dojoType="dijit.form.Button" id="toggleButton" iconClass="iconButtonTest"
type="button">
    Clique moi
</button>
<BR>
<BR>
 
<div jsid="searchDocsBar" id="searchDocsBar" dojoType="dijit.TitlePane" autoHeight="true" title="Recherche de documents" open="false" >
&nbsp;
 
<script type="text/javascript">
	addSearchLine(document.getElementById('searchDocsBar'), 0);
</script>
 
</div>
 
 
 
 
</div>
<div dojoType="dijit.layout.ContentPane" region="center" style="border: 0px; padding: 0px; margin: 0px; padding-top: 5px; padding-left: 30px; background-color: #F0F0F5;">
<TABLE style="border: 0px; padding: 0px; margin: 0px; width: 100%; height: 100%;">
<TR>
<TD BGCOLOR=WHITE STYLE="border-bottom: 2px solid #CECECE; border-right: 2px solid #CECECE; padding: 10px 25px 10px 25px; ">
<script type="text/javascript">
 
//dojo.require("dojox.grid.DataGrid");
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojox.grid.enhanced.plugins.Menu");
dojo.require("dijit.Menu");
 
 
 
var layoutDocs = [
	{field: "ARC_DOC_ID", name: "ARC_DOC_ID", width:"0px", styles: 'display: none;'},
	{field: "Nom_Prenom", name: "<A HREF=\"/ssafe_c/consult.php?go=arc&arc=76&o=1a\">Nom_Prenom</A>", width:"200px", classes:'dojoxGridColString'},
	{field: "Num_Titre", name: "<A HREF=\"/ssafe_c/consult.php?go=arc&arc=76&o=2a\">Num_Titre</A>", width:"80px", classes:'dojoxGridColInt'},
	{field: "Num_Bordereau", name: "<A HREF=\"/ssafe_c/consult.php?go=arc&arc=76&o=3a\">Num_Bordereau</A>", width:"80px", classes:'dojoxGridColInt'},
	{field: "Num_Dossier_Interne", name: "<A HREF=\"/ssafe_c/consult.php?go=arc&arc=76&o=4a\">Num_Dossier_Interne</A>", width:"80px", classes:'dojoxGridColInt'},
	{field: "Date_Emission", name: "<A HREF=\"/ssafe_c/consult.php?go=arc&arc=76&o=5a\">Date_Emission</A>", width:"80px", classes:'dojoxGridColString'},
	{field: "Cpte_Tiers", name: "<A HREF=\"/ssafe_c/consult.php?go=arc&arc=76&o=6a\">Cpte_Tiers</A>", width:"80px", classes:'dojoxGridColInt'},
	{field: "Date_Entree", name: "<A HREF=\"/ssafe_c/consult.php?go=arc&arc=76&o=7a\">Date_Entree</A>", width:"80px", classes:'dojoxGridColString'}
];
 
var storeDocs = new dojo.data.ItemFileWriteStore({data: { identifier: "ARC_DOC_ID", items: []}});
storeDocs.newItem({ARC_DOC_ID: "0", Nom_Prenom: "BOUTIN MARCEL", Num_Titre: "23823", Num_Bordereau: "102", Num_Dossier_Interne: "20713772", Date_Emission: "02/04/2008", Cpte_Tiers: "41151", Date_Entree: "03/01/2008"});
storeDocs.newItem({ARC_DOC_ID: "1", Nom_Prenom: "PESCHI JEAN", Num_Titre: "23822", Num_Bordereau: "102", Num_Dossier_Interne: "20715362", Date_Emission: "02/04/2008", Cpte_Tiers: "41110", Date_Entree: "06/01/2008"});
 
 
 
function noSort(index)
{
	return false;
}
 
 
 
</script>
 
 
<table dojoType="dojox.grid.EnhancedGrid" jsid="gridDocs" id="gridDocs" style="height: 500px;" autoWidth="true" autoHeight="true"
			store="storeDocs" structure="layoutDocs"
			canSort='noSort' clientSort="false" columnReordering="true" 
			rowSelector="20px" selectionMode="multiple"
			plugins='{menus:{rowMenu:"docsMenu", cellMenu:"docsMenu"}}'
			loadingMessage="Chargement..." errorMessage="Erreur !">
	<div dojoType="dijit.Menu" id="docsMenu" style="display: none;">
		<div dojoType="dijit.MenuItem">
			Cell Menu Item 1
		</div>
		<div dojoType="dijit.MenuItem">
			Cell Menu Item 2
		</div>
		<div dojoType="dijit.MenuItem">
			Cell Menu Item 3
		</div>
	</div>
</table>
</TD>
</TD>
</TABLE>
</div>
<div dojoType="dijit.layout.ContentPane" region="bottom" style="border: 0px; padding: 0px; margin: 0px; padding-top: 5px; padding-left: 100px; background-color: #F0F0F5;">
Quelques mots...
</div>
</div>

J'ai même essayé en mettant le ContentPane du bas en premier, ça ne change rien.

En tout cas, merci

**emmanuel.remy** · 24/03/2010, 18h36

Re,

J'ai pris ton code pour faire un test demain. Je te tiens au courant. C'est vrai que le souci avec le TitlePane va être de recalculer la hauteur une fois ouvert...

ERE

**Vow** · 25/03/2010, 15h31

Merci bien

BorderContainer et ExpandoPane

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager