Détruire un panel

**MadMax4** · 02/05/2011, 17h58

Bonjour

Je travaille avec EXT JS 4.0.
Je cherche à mettre au point une page d'accueil qui proposerait, à l'aide d'un menu, des statistiques sous forme de graphes.

le problème :
Lorsqu'un utilisateur clique dans un choix du menu, le graphe s'affiche (jusque là : ça va), mais lorsqu'il choisit un autre item du menu, le nouveau graphe s'affiche SOUS le précédent et non à sa place, comme je l'aurais souhaité.

Le graphe est construit dans un panel (c'est un item du panel) ; et le panel est rendu dans une DIV (déclaré dans un php).
J'ai essayé de :
- détruire la div
- détruire le panel (destroy, remove ...)
- mettre à jour le panel (update)

... rien n'y fait : j'ai toujours les graphes qui s'empile à l'affichage.
Extrait du code qui comprend :
le menu
2 graphes : un diagramme en bâton et un camembert.
Dans les 2 cas, le panel s'appelle avec originalité : "panel1"

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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
 
function Stat_menu()
{
	Ext.onReady(function(){	 
	var tb = new Ext.Toolbar();
        tb.render('toolbar');
 
	var menu = new Ext.menu.Menu({
        id: 'mainMenu',
        style: { overflow: 'visible'  },
        items: [{
			text: '1 - Nb paliers / PRT',
			checked: false,
			group: 'theme',
			checkHandler: onItemCheck
		}, {
			text: '2 - Nb de Connexions par jour',
			checked: false,
		        group: 'theme',
			//checkHandler: 
		}, {
			text: "3 - Classes de Nb paliers / PRT",
			checked: false,
			group: 'theme',
			checkHandler: onItemCheck
		}, {
			text: '4 - Nb de risques par projet',
			checked: false,
			group: 'theme',
			//checkHandler: 
			}
				]
								  })
 
	tb.add({
            text:'Liste des graphes',
            iconCls: 'bmenu',  // <-- icon
            menu: menu 
        })
						 })
 
function onItemCheck(item, checked){
 
switch(item.text.charAt(0)) {
	case ("1"):if (checked) {Baton()};
	break;
	case ("3"):if (checked) {Camenbert()};
	break
			}
    }
}
 
function Baton()
{
	Ext.Ajax.request({
			url: 'Ajax_compte_paliers.php',
			method:"POST",
			success: function(result,request) {
				var myData = {
					records : Ext.JSON.decode(result.responseText) };
		var datastore = new Ext.data.JsonStore({
		    fields: [
           			{name: 'Code_PRT'},
           			{name: 'Nb', type: 'int'}],
				data: myData.records
				});
		var panel1 = new Ext.Panel({
			frame:true,
			renderTo: 'panel',
			width:1000,
			height:400,
			layout:'fit',
			title: 'Liste en ordre d&eacute;croissant des 25 Projets',
       	 items : {
            id: 'chartCmp',
            xtype: 'chart',
            style: 'background:#fff',
            animate: true,
            shadow: true,
            store: datastore,
            axes: [{
                type: 'Numeric',
                position: 'left',
                fields: ['Nb'],
                label: {
                    renderer: Ext.util.Format.numberRenderer('0,0')
                },
                title: 'Nombre de paliers',
                grid: false,
                minimum: 0
            }, {
                type: 'Category',
                position: 'bottom',
                fields: ['Code_PRT'],
                title: 'Projets'
            }],
            series: [{
                type: 'column',
                axis: 'left',
                highlight: true,
                tips: {
                  trackMouse: true,
                  width: 70,
                  height: 28,
                  renderer: function(storeItem, item) {
            this.setTitle(storeItem.get('Code_PRT') + ': ' + storeItem.get('Nb'))
                  }
                },
 
                xField: 'Nb_pal',
                yField: 'Nb',
				style: {fill: '#FFA800' }
            }]
        }
								})
													},
	failure: function (result, request) { 
	Ext.MessageBox.alert('Problème de récupération des nombres de paliers', result.responseText) }
									})			
}
 
function Camenbert()
{
Ext.Ajax.request({
			url: 'Classe_nb_paliers.php',
			method:"POST",
			success: function(result,request) {
				var myData = {
					records : Ext.JSON.decode(result.responseText) };
	var datastore = new Ext.data.JsonStore({
	fields: [
		 {name: 'Classe'},
                 {name: 'Nb2', type: 'int'}],
		data: myData.records
				});
		var panel1 = new Ext.Panel({
		        title : 'Typologie de projets par nombre de paliers',
			frame:true,
			renderTo: 'panel',
			width:1000,
			height:400,
			layout:'fit',
		        items: {
				xtype: 'chart',
				id: 'chartCmp',
				animate: true,
				store: datastore,
				shadow: true,
				legend: {position: 'right'},
				insetPadding: 60,
				theme: 'Base:gradients',
				series: [{
					type: 'pie',
					field: 'Nb2',
					showInLegend: true,
					tips: {
					        trackMouse: true,
					        width: 140,
						height: 28,
						renderer: function(storeItem, item) {
						//calculate percentage.
						var total = 0;
						datastore.each(function(rec) {
						total += rec.get('Nb2');
								});
								this.setTitle(storeItem.get('Classe') + ': ' + Math.round(storeItem.get('Nb2') / total * 100) + '%')   }
							},
					highlight: { 	 segment: {
					   margin: 20}
										},
					label: {
						field: 'Classe',
						display: 'rotate',
						contrast: true,
						font: '16px Arial'	}
						}]
					}
									})
													},
		failure: function (result, request) { 
		Ext.MessageBox.alert('Problème de récupération des classes de paliers', result.responseText) }
									})	
}

Pour conclure, ma question est :
Comment fait-on pour détruire un panel ou pour faire en sorte qu'un graphe remplace l'autre dans mon problème ?

merci de vos propositions.
cordialement

**JulienFio** · 03/05/2011, 09h54

Bonjour,

Comment t'y prends tu pour le détruire ton panel ? Si tu le détruis correctement avant d'en afficher un autre tu ne devrais pas avoir de problème.

En Extjs4 tu peux détruire les items de ton panel grace à cette méthode:

Code :

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

removeDocked( Ext.Component item., [Boolean autoDestroy] ) : Void

En tout cas je ne trouve pas très logique ta facon de faire.. Tu utilises deux variables qui ont le même nom et le même renderTo mais qui ne sont connu que dans leur fonction (baton ou camenbert)..

Pourquoi faire un new Panel tout le temps ? un remove/add de l'item de ce panel suffirait..

**MadMax4** · 03/05/2011, 10h15

Merci JulienFio de t'être penché sur mon problème.

En effet, il y a un certain nombre d'idioties dans mon code.
Faut dire que je suis parti des sources EXTjs sans vraiment les comprendre.

Cependant, je ne sais pas comment faire pour obtenir dans le même panel n graphes (qui changent selon le choix dans le menu) sans faire un new à chaque fois.
SI je le déclare une seule fois au début, comment décrire les items des différents types de graphes ?

En tout cas merci, je vais y réfléchir.
cordialement

**JulienFio** · 03/05/2011, 10h40

L'idée est de définir ton panel en dehors des méthodes baton et camembert. Ces deux méthodes vont seulement te servir à mettre à jours le contenu de ce panel.

C'est important de définir des ID sur tes panel et items, de façon à pouvoir les récupérer facilement.

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
125
126
127
128
129
130
//Tu défini ton panel
var panel1 = new Ext.Panel({
                        id: 'monPanelGraph',
			frame:true,
			renderTo: 'panel',
			width:1000,
			height:400,
			layout:'fit',
			title: ''
});

//Ta méthode baton
function Baton()
{
	Ext.Ajax.request({
			url: 'Ajax_compte_paliers.php',
			method:"POST",
			success: function(result,request) {
				var myData = {
					records : Ext.JSON.decode(result.responseText) };
		var datastore = new Ext.data.JsonStore({
		    fields: [
           			{name: 'Code_PRT'},
           			{name: 'Nb', type: 'int'}],
				data: myData.records
				});
panel1.removeDocked(Ext.getCmp('chartCmpCamenbert');
		panel1.addDocked({
            id: 'chartCmpBaton',
            xtype: 'chart',
            style: 'background:#fff',
            animate: true,
            shadow: true,
            store: datastore,
            axes: [{
                type: 'Numeric',
                position: 'left',
                fields: ['Nb'],
                label: {
                    renderer: Ext.util.Format.numberRenderer('0,0')
                },
                title: 'Nombre de paliers',
                grid: false,
                minimum: 0
            }, {
                type: 'Category',
                position: 'bottom',
                fields: ['Code_PRT'],
                title: 'Projets'
            }],
            series: [{
                type: 'column',
                axis: 'left',
                highlight: true,
                tips: {
                  trackMouse: true,
                  width: 70,
                  height: 28,
                  renderer: function(storeItem, item) {
            this.setTitle(storeItem.get('Code_PRT') + ': ' + storeItem.get('Nb'))
                  }
                },
                
                xField: 'Nb_pal',
                yField: 'Nb',
				style: {fill: '#FFA800' }
            }]
        });
													},
	failure: function (result, request) { 
	Ext.MessageBox.alert('Problème de récupération des nombres de paliers', result.responseText) }
									})			
}
 
function Camenbert()
{
Ext.Ajax.request({
			url: 'Classe_nb_paliers.php',
			method:"POST",
			success: function(result,request) {
				var myData = {
					records : Ext.JSON.decode(result.responseText) };
	var datastore = new Ext.data.JsonStore({
	fields: [
		 {name: 'Classe'},
                 {name: 'Nb2', type: 'int'}],
		data: myData.records
				});
panel1.removeDocked(Ext.getCmp('chartCmpBaton');
panel1.insertDocked({
				xtype: 'chart',
				id: 'chartCmpCamenbert',
				animate: true,
				store: datastore,
				shadow: true,
				legend: {position: 'right'},
				insetPadding: 60,
				theme: 'Base:gradients',
				series: [{
					type: 'pie',
					field: 'Nb2',
					showInLegend: true,
					tips: {
					        trackMouse: true,
					        width: 140,
						height: 28,
						renderer: function(storeItem, item) {
						//calculate percentage.
						var total = 0;
						datastore.each(function(rec) {
						total += rec.get('Nb2');
								});
								this.setTitle(storeItem.get('Classe') + ': ' + Math.round(storeItem.get('Nb2') / total * 100) + '%')   }
							},
					highlight: { 	 segment: {
					   margin: 20}
										},
					label: {
						field: 'Classe',
						display: 'rotate',
						contrast: true,
						font: '16px Arial'	}
						}]
					});		
													},
		failure: function (result, request) { 
		Ext.MessageBox.alert('Problème de récupération des classes de paliers', result.responseText) }
									})	
}

Important:
addDocked( Object/Array component., [Number pos] ) : Void
Adds docked item(s) to the panel.
Parameters

component. : Object/Array
The Component or array of components to add. The components must include a 'dock' parameter on each component to indicate where it should be docked ('top', 'right', 'bottom', 'left').
pos : Number
(optional) The index at which the Component will be added

Ceci est censé te donné une idée sur la facon de faire, je n'ai en aucun cas testé ce code et je ne pense pas qu'il focntionne tel quel

**MadMax4** · 03/05/2011, 14h26

Merci Julien
J'ai utilisé ta suggestion

Voici le 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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
 
var panel1 = new Ext.Panel({
            id: 'monPanelGraph',
			frame:true,
			//renderTo: 'panel',
			width:1000,
			height:400,
			layout:'fit',
			title: ''
});
 
function Stat_menu()
{
	Ext.onReady(function(){
//	document.Stat.pan_vis.value = "0";		 
	var tb = new Ext.Toolbar();
    tb.render('toolbar');
 
	var menu = new Ext.menu.Menu({
        id: 'mainMenu',
        style: {
            overflow: 'visible'     // For the Combo popup
        },
        items: [
				{
					text: '1 - Nb paliers / PRT',
					checked: false,
					group: 'theme',
					checkHandler: onItemCheck
				}, {
					text: '2 - Nb de Connexions par jour',
					checked: false,
					group: 'theme',
					//checkHandler: 
				}, {
					text: "3 - Classes de Nb paliers / PRT",
					checked: false,
					group: 'theme',
					checkHandler: onItemCheck
				}, {
					text: '4 - Nb de risques par projet',
					checked: false,
					group: 'theme',
					//checkHandler: 
				}
				]
								  })
 
 
	tb.add({
            text:'Liste des graphes',
            iconCls: 'bmenu', 
            menu: menu  
        })
						 })
 
function onItemCheck(item, checked){
 
switch(item.text.charAt(0)) {
	case ("1"):if (checked) {Baton() };
	break;
	case ("3"):if (checked) {Camembert()};
	break
			}
    }
}
 
function Baton()
{
	Ext.Ajax.request({
			url: 'Ajax_compte_paliers.php',
			method:"POST",
			success: function(result,request) {
				var myData = {
					records : Ext.JSON.decode(result.responseText) };
				var datastore = new Ext.data.JsonStore({
					fields: [
           			{name: 'Code_PRT'},
           			{name: 'Nb', type: 'int'}],
					data: myData.records
				});
 
			panel1.title= 'Liste en ordre d&eacute;croissant des 25 Projets ayant le plus grand nombre de paliers';
       		panel1.removeDocked(Ext.getCmp('chartCmpCamenbert'));
			panel1.addDocked({
				id: 'chartCmpBaton',
				xtype: 'chart',
				style: 'background:#fff',
				animate: true,
				shadow: true,
				store: datastore,
				axes: [{
					type: 'Numeric',
					position: 'left',
					fields: ['Nb'],
					label: {
						renderer: Ext.util.Format.numberRenderer('0,0')
					},
					title: 'Nombre de paliers',
					grid: false,
					minimum: 0
				}, {
					type: 'Category',
					position: 'bottom',
					fields: ['Code_PRT'],
					title: 'Projets'
					}],
				series: [{
					type: 'column',
					axis: 'left',
					highlight: true,
					tips: {
					  trackMouse: true,
					  width: 70,
					  height: 28,
						renderer: function(storeItem, item) {
						this.setTitle(storeItem.get('Code_PRT') + ': ' + storeItem.get('Nb')) }
						},
 
					xField: 'Nb_pal',
					yField: 'Nb',
					style: { fill: '#FFA800' }
						}]
								})
			panel1.render('panel')
													},
			failure: function (result, request) { 
				Ext.MessageBox.alert('Problème de récupération des nombres de paliers', result.responseText) }
									})
}
 
function Camembert()
{
Ext.Ajax.request({
			url: 'Classe_nb_paliers.php',
			method:"POST",
			success: function(result,request) {
				var myData = {
					records : Ext.JSON.decode(result.responseText) };
				var datastore = new Ext.data.JsonStore({
					fields: [
				    {name: 'Classe'},
           			{name: 'Nb2', type: 'int'}],
					data: myData.records
				});
 
				panel1.title = 'Typologie de projets par nombre de paliers';
				panel1.removeDocked(Ext.getCmp('chartCmpBaton'));
				panel1.addDocked({
						id: 'chartCmpCamenbert',
						xtype: 'chart',
						animate: true,
						store: datastore,
						shadow: true,
						legend: {
							position: 'right'
						},
						insetPadding: 60,
						theme: 'Base:gradients',
						series: [{
							type: 'pie',
							field: 'Nb2',
							showInLegend: true,
							tips: {
							  trackMouse: true,
							  width: 140,
							  height: 28,
							  renderer: function(storeItem, item) {
								//calculate percentage.
								var total = 0;
								datastore.each(function(rec) {
									total += rec.get('Nb2');
								});
								this.setTitle(storeItem.get('Classe') + ': ' + Math.round(storeItem.get('Nb2') / total * 100) + '%')
							  }
							},
							highlight: {
							  	segment: {
									margin: 20 }
										},
							label: {
								field: 'Classe',
								display: 'rotate',
								contrast: true,
								font: '16px Arial'
									}
						}]
 
										})
				panel1.render('panel')
													},
			failure: function (result, request) { 
				Ext.MessageBox.alert('Problème de récupération des classes de paliers', result.responseText) }
									})	
}

Les panels se remplacent bien les uns les autres.
Seul bémol, mais de taille, les graphiques ne s'affichent pas !

mais c'est surement la bonne piste.
cordialement

**JulienFio** · 03/05/2011, 14h58

Il s'agit d'un problème lors de l'ajout de ton item, mon exemple n'est pas correct.

Essayes plutot de les ajouter comme ceci:

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
 
panel1.add({
				id: 'chartCmpBaton',
				xtype: 'chart',
				style: 'background:#fff',
				animate: true,
				shadow: true,
				store: datastore,
				axes: [{
					type: 'Numeric',
					position: 'left',
					fields: ['Nb'],
					label: {
						renderer: Ext.util.Format.numberRenderer('0,0')
					},
					title: 'Nombre de paliers',
					grid: false,
					minimum: 0
				}, {
					type: 'Category',
					position: 'bottom',
					fields: ['Code_PRT'],
					title: 'Projets'
					}],
				series: [{
					type: 'column',
					axis: 'left',
					highlight: true,
					tips: {
					  trackMouse: true,
					  width: 70,
					  height: 28,
						renderer: function(storeItem, item) {
						this.setTitle(storeItem.get('Code_PRT') + ': ' + storeItem.get('Nb')) }
						},
 
					xField: 'Nb_pal',
					yField: 'Nb',
					style: { fill: '#FFA800' }
						}]
								});

Ou peut-être que comme ça cela fonctionne aussi:

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
 
panel1.items = {
				id: 'chartCmpBaton',
				xtype: 'chart',
				style: 'background:#fff',
				animate: true,
				shadow: true,
				store: datastore,
				axes: [{
					type: 'Numeric',
					position: 'left',
					fields: ['Nb'],
					label: {
						renderer: Ext.util.Format.numberRenderer('0,0')
					},
					title: 'Nombre de paliers',
					grid: false,
					minimum: 0
				}, {
					type: 'Category',
					position: 'bottom',
					fields: ['Code_PRT'],
					title: 'Projets'
					}],
				series: [{
					type: 'column',
					axis: 'left',
					highlight: true,
					tips: {
					  trackMouse: true,
					  width: 70,
					  height: 28,
						renderer: function(storeItem, item) {
						this.setTitle(storeItem.get('Code_PRT') + ': ' + storeItem.get('Nb')) }
						},
 
					xField: 'Nb_pal',
					yField: 'Nb',
					style: { fill: '#FFA800' }
						}]
								};

(Penses aux ;, tu en oublies plusieurs !)

**MadMax4** · 03/05/2011, 15h20

Désolé Julien,
les 2 propositions ne fonctionnent pas.

En outre, si on ne détruit plus les containers, les graphes ne vont plus se remplacer les uns les autres sur le même emplacement !

J'avais déjà exploré une solution de ce type mais les graphes ne s'affichaient pas non plus, c'est pourquoi je voulais m'orienter vers une solution brutale de suppression de div.

merci encore pour ta patience.
cordialement

Détruire un panel

Ext JS / Sencha

Discussions similaires

Partager

Partager