chargement d'une page dans un viewport

**DiverSIG** · 22/02/2011, 16h14

Bonjour,

j'ai un viewport avec une toolbar dans la partir north, à chaque item de la toolbar, j'associe une fonction dans la propriété handler qui charge une page php dans la partie center du viewport :

ma page index.php:

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
<html>
 
<head>
 
<title>Mon appli</title>
 
<script type="text/javascript" src="lib/ext-3.3.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="lib/ext-3.3.1/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="lib/ext-3.3.1/resources/css/ext-all.css" />
 
<script type="text/javascript" src="js/appli.js"></script>
 
</head>
 
<body>
 
<div id="page-header"></div>
 
<div id="page-main"></div>
 
<div id="page-footer"></div>
 
</body>
 
</html>

toutes les fonctions de chargement sont sur le modèle:

Code :

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

1
2
3
4
5
6
7
8
9
10
function dataView() {
	var p = Ext.getCmp('page');
	Ext.Ajax.request({
			url: 'dataView.php',
			success: function(response,opts){
						opts.panel.update(response.responseText);
				},
			panel: p
	});
}

avec la propriété url qui varie suivant la page à charger.

le problème, c'est que si ma page à charger ne contient que du texte, ça marche nickel, mais s'il y a dans la page des composants Ext (par exemple des formulaires), les composants ne s'affichent pas.

exemple avec dataView.php:

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
<html>
 
<head>
 
<title>Visualisation des données</title>
<script type="text/javascript" src="lib/ext-3.3.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="lib/ext-3.3.1/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="lib/ext-3.3.1/resources/css/ext-all.css" />
 
<script type="text/javascript">
 
Ext.QuickTips.init();
 
Ext.onReady(function(){
 
var dd = new Array();
dd.push({name:'Jul 07'});
dd.push({name:'Aug 07'});
dd.push({name:'Sep 07'});
var store = new Ext.data.JsonStore({
				fields:['name'],
				data:dd
	});
 
var formGraphe = new Ext.form.FormPanel({
		renderTo:'formGraphe',
		frame:true,
		title: 'Simple Form',
		bodyStyle:'padding:5px 5px 0',
		width: 700,
		items: [{
			xtype:'fieldset',
			title: 'Paramètres',
			autoHeight:true,
			items :[new Ext.form.ComboBox({
						id: 'parametre',
						name: 'parametre',
						store: store,
						displayField:'name',
						fieldLabel: 'paramètre',
						width: 200,
						typeAhead: true,
						mode: 'local',
						forceSelection: true,
						triggerAction: 'all',
						emptyText:'Selectionnez un paramètre...',
						allowBlank:false
						})
				]
			}
		],
		buttons: [{
			text: 'RAZ'
			},
			{
			text: 'Tracer le graphique'
			}]
 
});	// fin formGraphe
 
}) //fin Ext.onReady(
 
</script>
 
 
</head>
 
<body>
<div id="formGraphe"></div>
 
<table>
	<tr><td>test affichage de texte</td></tr>
</table>
 
</body>
 
</html>

quand je charge cette page, j'ai bien 'test affichage de texte' qui s'affiche, mais pas le formulaire.
par contre, si j'affiche la page dataView.php seule (hors de l'appli), elle s'affiche parfaitement.

qu'est ce qui cloche??

Merci,
Nico

**JulienFio** · 23/02/2011, 09h29

Ta façon de faire me parait un peu bizarre. Pour commencer je ne pense pas que tu doives placer des includes dans la page Php qui est elle même inclue dans ton ViewPort. Est-ce une "obligation" d'intégrer une page Php dans ton centerViewPort ? Si j'avais eu le choix j'aurai plutôt intégré uniquement des composants Ext et Javascript

**DiverSIG** · 23/02/2011, 10h40

OK, ça marche, mais seulement si les composants que je met dans la page sont déclarés dans appli.js.

si je fais un fichier moncomposant.js où je déclare par exemple un panel :

Code :

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

1
2
3
4
5
6
7
var desc = new Ext.Panel({
				layout: 'column',
				width:800,
				height:50,
				html: '<table class=\'texte1\'>'+
	'<tr><td align="justify">du texte ici</td></tr></table>'
});

je déclare moncomposant.js en en-tête de mon fichier index.php (comme appli.js)
quand je clique sur le bouton de menu, mon panel ne s'affiche pas.
au bouton, j'affecte un fonction de handler du type :

Code :

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

1
2
3
4
5
6
7
8
9
function desc() {
 
	var p = Ext.getCmp('page');
	clearExtjsComponent(p);
 
	p.add(desc).show();
	p.doLayout();
 
}

où clearExtjsComponent(p);

Code :

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

1
2
3
4
5
6
function clearExtjsComponent(cmp) {
    var f;
    while(f = cmp.items.first()){
        cmp.remove(f, true);
    }
}

une idée du problème?

Nico

**JulienFio** · 23/02/2011, 10h56

Utilises-tu Firebug ? Si oui, as-tu une erreur qui puisse nous mettre sur la voie ?

C'est voulu d'avoir le même nom pour ta variable Panel et ta méthode ?

Juste pour tester, est-ce qu'il s'affiche en faisant comme ça ?

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
 
function desc() {
 
	var p = Ext.getCmp('page');
	clearExtjsComponent(p);
 
	p.add({
                                xtype: 'panel',
				layout: 'column',
				width:800,
				height:50,
				html: '<table class=\'texte1\'>'+
	'<tr><td align="justify">du texte ici</td></tr></table>'
});
 
}

**DiverSIG** · 24/02/2011, 08h06

bon alors, j'ai changé de tactique : au lieu de supprimer/ajouter des composants pour créer mes pages à chaque clic sur un item de menu, j'ai trouvé qu'on peut déclarer la partie center du viewport avec layout:'card'.
on déclare ensuite plusieurs items avec un id, et à chaque clic de menu, on change l'item actif :

déclaration des pages :

Code :

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

1
2
3
4
5
6
7
8
var pageAccueil = new Ext.Panel({
				itemId: 'pageAccueil',
				html: '<table class=\'titre\' width="800">'+
					'<tr><td align="center" height="100">du texte ici</td></tr>'+
					'</table>'
});
 
var page1 = ...

dans le viewport:

Code :

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

1
2
3
4
5
6
7
8
9
{
		region: 'center',
		id: 'center',
		applyTo: 'page-center',
		layout: 'card',
		border: false,
		activeItem: 0,
		items: [pageAccueil, page1, page2]
},

sur clic du menu, on appelle une fonction du style :

Code :

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

1
2
3
function pageAccueil() {
	Ext.getCmp('center').getLayout().setActiveItem('pageAccueil');
}

ça ça marche nikel.

reste 2 problèmes :
- le layout:'card' semble se comporter comme layout:'fit', c'est à dire qu'il occupe toute la partie center du viewport.
je voudrias le limiter à 800 de large, mais même si je met width:800, ça n'a aucun effet.

- tout ça marche bien si je met toutes mes déclarations dans appli.js, ce qui risque de devenir rapidement lourd à gérer.
si je met la déclaration de mes page dans des fichiers js séparés que je déclare en en-têtes de mon fichier index.php, ça ne marche plus.
exemple :
page1.js:

Code :

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

1
2
3
4
5
var page1 = new Ext.Panel({
				itemId: 'page1',
				html: '<table class=\'texte1\' width="800">'+
					'<tr><td align="justify">du texte ici</td></tr></table>'
});

index.php:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<html>
 
<head>
 
<script type="text/javascript" src="lib/ext-3.3.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="lib/ext-3.3.1/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="lib/ext-3.3.1/resources/css/ext-all.css" />
 
<script type="text/javascript" src="js/page1.js"></script>
<script type="text/javascript" src="js/appli.js"></script>
...

des idées ?
Nico

**JulienFio** · 25/02/2011, 11h31

Pensez à poster votre solution si vous en avez trouver une à votre problème. Cela pourra aider d'autre personnes dans le même cas

chargement d'une page dans un viewport

Ext JS / Sencha

Discussions similaires

Partager

Partager