Disposition d'un grid

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:

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:

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:

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

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.

Ne serait-ce pas le

Code:

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.

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

Le

Code:

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:

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