Disposition d'un grid

DonMero · 06/05/2011, 15h52

Bonjour à tous, j'ai un petit soucis dont je ne vois pas le bout. Je souhaite affiché une grid dans une fenêtre contenant un tabpanel. La grid ce trouve dans le premier onglet. Le soucis est que lorsque je lance mon code, la grid ce trouve au dessus de mes onglets et non à l'interieur du premier...

Lorsque je clique sur l'onglet voulu le problème disparait et la grid se place où il faut.

Mon code est dispatché en trois fichier :
- index.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
 
<link rel="stylesheet" type="text/css" href="./public/lib/extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="./public/lib/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./public/lib/extjs/ext-all.js"></script>
<script  type="text/javascript" src="./JS/grid.js"></script>
<script  type="text/javascript" src="./JS/FenetrePrincipale.js"></script>
 
<html>
	<body>
		<input id="test" type="button" value="bouton" >
		<div id="winFormDiv"></div>
	</body>	
</html>
 
<script type="text/javascript">
 
	Ext.onReady(function(){	
 
		OuvrirFenetre();
 
	})	
 
</script>

- FenetrePrincipale.js correspondant à la fenetre

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
/**
 * @author n.mery
 */
 function OuvrirFenetre(){
 
	var winForm,	
	button = Ext.get('test');
 
   	button.on('click', function(){
 
	if(!winForm){	
		winForm = new Ext.Window({
		applyTo:'winFormDiv',
        title: 'Menu Principal',
	    closable: true,
        closeAction: 'hide',
	    //animateTarget: this,
	    width: 800,
	    height: 600,
	    layout: 'border',
	    defaults: {
		    collapsible: true,
		    split: true,
		    bodyStyle: 'padding:15px'
			},
			items: [{
				region: 'north',
	            title: 'Navigation',
	            split: true,
				maxSize : 300,
	            collapsible: true,
				collapsed: true,
	            floatable: false,
				//margins: '5 5 5 5'						
                },{					
	            region: 'center',
	            xtype: 'tabpanel',
				collapsible: false,
				margins: '5 0 0 0',
	            items: [{
	            	title: 'Gestion Fiche-Temps',
					items: [
						grid()
					]
					}, {
	                title: 'Statistique Fiche-Temps et Projets',
	                html: 'En construction'
	                }, {
	                title: 'Gestion des indicateurs',
	                html: 'En construction'
	                },{
					title:'Impression',
					html:'En construction'							
					}]
				}
			]
		})	
	}winForm.show(this);
 
	})
 
};

et grid.js contenant la definition de la grid

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
/**
 * @author n.mery
 */
 
function grid(){
 
		var donnees = [
			['test1','10','12:10','1222','11/12/12','12/55/99'],
			['test2','10','12:10','1222','11/12/12','12/55/99'],
			['test3','10','12:10','1222','11/12/12','12/55/99'],
			['test4','10','12:10','1222','11/12/12','12/55/99']
		];
 
		var stockage = new Ext.data.ArrayStore({
			fields:[
				{name:'stk_Libelle'},
				{name:'stk_Temps'},
				{name:'stk_HeureDebut'},
				{name:'stk_HeureFin'},
				{name:'stk_DateDebut'},
				{name:'stk_DateFin'}				
			]	
		});
 
		stockage.loadData(donnees);
 
		var TempsGrid = new Ext.grid.EditorGridPanel({
			store:stockage,
			renderTo : 'winFormDiv',
			title:'Fiche Temps',
			stripeRows:true,
			autoExpand:true,
			height: 550,
			autoExpandColumn:'col_DateFin',
			columnWidth: .100,
			//autoExpandColumn:'col_Libelle',
			cm : new Ext.grid.ColumnModel([
				{header:'Libelle', dataIndex:'stk_Libelle', sortable:true, id:'col_Libelle'},
				{header:'Temps', dataIndex:'stk_Temps', sortable:true, id:'col_Temps'},
				{header:'Heure debut', dataIndex:'stk_HeureDebut', sortable:true, id:'col_HeureDebut'},
				{header:'Heure Fin', dataIndex:'stk_HeureFin', sortable:true, id:'col_HeureFin'},
				{header:'Date Debut', dataIndex:'stk_DateDebut', sortable:true, id:'col_DateDebut'},
				{header:'Date Fin', dataIndex:'stk_DateFin', sortable:true, id:'col_DateFin'}			
			])
		});
 
		return TempsGrid;
};

Quelqu'un y comprend t'il quelque chose?

Merci à tous

kenny.kev · 06/05/2011, 16h42

Bonjour à toi,

Déjà il te manque les attribut suivant pour tous tes onglets :

xtype: panel
layout: fit

Je penses qu'avec ça, ça devrais mieux fonctionner.

JulienFio · 06/05/2011, 16h44

Ne serait-ce pas le

Code :

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

renderTo : 'winFormDiv',

défini dans ton grid qui en serait la cause ? Je ne pense pas que ce paramètre ait une réelle utilité dans ton cas étant donné que ce grid est déclaré comme étant un item de ton tabPanel.

DonMero · 09/05/2011, 08h58

Merci de vos réponses, ça marche impeccable. Effectivement le renderTo : 'winFormDiv', n'etait pas justifié. Par contre à quoi servent :
* xtype: panel
* layout: fit
?

Merci de votre aide et de vos conseils

JulienFio · 09/05/2011, 09h13

Le

Code :

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

xtype : 'panel'

spécifie simplement qu'il s'agit d'un composant de type panel. Je ne pense pas que cela soit indispensable dans la définition des onglet d'un tabpanel.

Le

Code :

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

layout: 'fit'

quand à lui renseigne sur la façon de s'afficher. un layout fit veut dire que ton composant prendra toute la place qui lui ait permis de prendre, en l'occurence tout le DIV de son composant parent. Il existe une multitude de layout différents (table, column, border, etc..)

06/05/2011, 16h42	#2
kenny.kev Membre chevronné Inscription : janvier 2007 Messages : 573 Détails du profil Informations personnelles : Sexe : Âge : 27 Localisation : France, Indre et Loire (Centre) Informations professionnelles : Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : janvier 2007 Messages : 573 Points : 687 Points : 687	Bonjour à toi, Déjà il te manque les attribut suivant pour tous tes onglets : xtype: panel layout: fit Je penses qu'avec ça, ça devrais mieux fonctionner.
	00

06/05/2011, 16h44	#3
JulienFio Membre éclairé Julien Fiorentino Inscription : novembre 2007 Messages : 201 Détails du profil Informations personnelles : Nom : Julien Fiorentino Âge : 28 Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur) Informations forums : Inscription : novembre 2007 Messages : 201 Points : 336 Points : 336	Ne serait-ce pas le Code : Sélectionner tout - Visualiser dans une fenêtre à part renderTo : 'winFormDiv', défini dans ton grid qui en serait la cause ? Je ne pense pas que ce paramètre ait une réelle utilité dans ton cas étant donné que ce grid est déclaré comme étant un item de ton tabPanel.
	00

09/05/2011, 09h13	#5
JulienFio Membre éclairé Julien Fiorentino Inscription : novembre 2007 Messages : 201 Détails du profil Informations personnelles : Nom : Julien Fiorentino Âge : 28 Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur) Informations forums : Inscription : novembre 2007 Messages : 201 Points : 336 Points : 336	Le Code : Sélectionner tout - Visualiser dans une fenêtre à part xtype : 'panel' spécifie simplement qu'il s'agit d'un composant de type panel. Je ne pense pas que cela soit indispensable dans la définition des onglet d'un tabpanel. Le Code : Sélectionner tout - Visualiser dans une fenêtre à part layout: 'fit' quand à lui renseigne sur la façon de s'afficher. un layout fit veut dire que ton composant prendra toute la place qui lui ait permis de prendre, en l'occurence tout le DIV de son composant parent. Il existe une multitude de layout différents (table, column, border, etc..)
	00

09/05/2011, 08h58	#4
DonMero Invité régulier Inscription : février 2007 Messages : 23 Détails du profil Informations forums : Inscription : février 2007 Messages : 23 Points : 8 Points : 8	Merci de vos réponses, ça marche impeccable. Effectivement le renderTo : 'winFormDiv', n'etait pas justifié. Par contre à quoi servent : * xtype: panel * layout: fit ? Merci de votre aide et de vos conseils
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email