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

Disposition d'un grid

Ext JS / Sencha

Vue hybride

Discussions similaires

Partager

Partager