rafraichir une grid

Version imprimable

rafraichir une grid

Bonjour

C'est le front rouge de honte que je reviens sur ce forum pour poursuivre une discussion que je pensai terminée.

J'affiche 2 grids dans ma page. La grid 2 s'affiche en fonction du choix d'une ligne de la grid 1. Ca : ça fonctionne.
Mais lorsque je clique sur une autre ligne de la grid 1, une troisième grid apparait sous la grid 2 alors que je souhaiterai simplement un rafraichissement de la grid 2.
Je viens de lite le post de Bqiko et la réponse, mais j'utilise un "store.loadData" et il n'existe pas de "reLoadData" !

ci-dessous le code d'affichage de la grid 1 :

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
function Construit_grid()
{
Ext.onReady(function(){
var selectBox = document.getElementById("ListeProc"); 
	var nb = selectBox.options.length; 
	var mydata = new Array();
	for (var i=0; i<nb; i++) { 
		morceaux=selectBox.options[i].value.split(',');
		var d_transition = new Array;
		for (var j=0; j<3; j++) { 
			d_transition.push(morceaux[j]); 
			 					};
			mydata[i] = d_transition; 
								} ;
 
    var store = new Ext.data.ArrayStore({
        fields: [
           {name: 'Processus'},
           {name: 'Nom', type: 'string'},
           {name: 'Nb', type: 'int'},]
 
    });	
 
    store.loadData(mydata);
 
    var grid = new Ext.grid.GridPanel ({
        store: store,
 
		sm: new Ext.grid.RowSelectionModel({
      singleSelect: true,
      listeners: {
         rowselect: function(sm,index, record) {
			toto = record.data.Processus;
			ligne = record.data.Nb;
			document.DDT.proc.value=toto;
		Ext.Ajax.request({
		   url: 'Ajax_DDT.php',
		   method:"POST",
		   success: function(result,request) {
			var mydata2 = new Array();
			morceaux=result.responseText.split(',');
			for (var i=0; i<ligne; i++) { 
			        var d_transition = new Array;
			        for (var j=0; j<4; j++) { 
				d_transition.push(morceaux[(i*4)+j]); 
									};
				mydata2[i] = d_transition; 
									} ;
				grid_ddt(mydata2);
			},
		   failure: function ( result, request) { 
			Ext.MessageBox.alert('Problème', result.responseText); },
		   headers: {
			   'my-header': 'DDT'
		   },
 			params: {proc:toto},
		});
 
								                 }
             	},
 
      }),
        columns: [
            {id:'Processus',header: 'Processus', width: 60, sortable: true, dataIndex: 'Processus'},
            {header: 'Nom', width: 165, sortable: true,  dataIndex: 'Nom'},
            {header: 'Nb', width: 40, sortable: true,  dataIndex: 'Nb'}],
 
        stripeRows: true,
//        autoExpandColumn: 'Processus',
        height: 155,
        width: 270,
        title: 'Processus',
        stateful: true,
        stateId: 'grid'
    });
 
    	grid.render('grid-example');
					 })
 
}

ci-dessous le code d'affichage de la grid 2 :

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
 
function grid_ddt(resultat)
{
Ext.onReady(function(){
 
var store2 = new Ext.data.ArrayStore({
	fields: [
	{name: 'Code'},
	{name: 'Nom_ddt', type: 'string'},
	{name: 'Etat', type: 'string'},
	{name: 'Nom_dirpro', type: 'string'}]
						});		
 
    	store2.loadData(resultat);
 
		var grid2 = new Ext.grid.GridPanel({
			store: store2,
	columns: [
{id:'Code',header: 'Code', width: 100, sortable: true, dataIndex: 'Code'},
{header: 'Nom_ddt', width: 310, sortable: true,  dataIndex: 'Nom_ddt'},
{header: 'Etat', width: 158, sortable: true,  dataIndex: 'Etat'},
{header: 'Nom_dirpro', width: 138, sortable: true,  dataIndex: 'Nom_dirpro'}],
 
	stripeRows: true,
	height: 155,
	width: 717,
	title: 'DDT',
	stateful: false,
	stateId: 'grid2							});
 
		grid2.render('grid-example2');
 
	});	
}

et le php qui les lance :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<?php
echo "<script>lance('Projet : ".$_SESSION["LIB_PRT_choisi"]."');</script>";
echo "<script>lance('Palier : ".$lib_palier."');</script>";
 
echo "<SELECT id='ListeProc' style='display: none' Name='ListeProc'  size='5' align='left'>";
while ($proc_trouve = mysql_fetch_array($proc, MYSQL_NUM))
                    {           $LignePip=$proc_trouve['0'].",".$proc_trouve['1'].",".$proc_trouve['2'];
echo "<option value=\"$LignePip\">".$LignePip."</option>";
                    }
echo "</SELECT>";
echo "<script>Construit_grid();</script>";
           ?>

Quelqu'un peut-il m'expliquer ?

cordialement
madmax

05/05/2010, 12h54
takitano
Bonjour,

Alors j'ai pas compris grand chose ...
mais, je pense que le render doit ajouter ton nouveau composant a l'interieur du div existant ...

Essayes de faire :
Code:

1 2 Ext.get('grid-example2').removeAll(); grid2.render('grid-example2');
05/05/2010, 15h19
MadMax4

bonjour Takitano

c'est probablement ça.
le "render" refait la grid en dessous de la précédente alors que j'ai pourtant spécifié dans le CSS sa position absolue.

mais pour ta solution, fireBug me dit :
Ext.get("grid-example2").removeAll is not a function !

help !
cordialement

Salut,

j'utilise jamais de div existante dans le body ... alors, je ne peux te donner une réponse exacte ...
essayes ca ...
Code:

1 2 3 4 5 //a placer avant ton var grid2 = new Ext.gridPanel(... ! if(typeof(grid2)!="undefined") grid2.removeAll();
ou sinon,
Code:

1 2 //avant le render('grid-example2';) Ext.get('grid-example2).remove();

06/05/2010, 12h06
MadMax4

merci Takitano

la solution :

Citation:

if(typeof(grid2)!="undefined")
grid2.removeAll();

ne donne pas d'erreur mais ne change rien. Je continue à obtenir d'autres "grid2", les unes en dessous des autres !

la solution :

Citation:

//avant le render('grid-example2';)
Ext.get('grid-example2).remove();

génère une erreur :
"b is null"

mais c'est peut-être normal puisqu'alors la div est détruite !

Je pense qu'il faudrait plutôt chercher à "Rafraichir" la grid au lien de faire un "render" mais je ne sais pas comment faire !

Quoi qu'il en soit, merci de ton aide.
cordialement

a partir du code suivant,

Code:

1
2
//avant le render('grid-example2'
Ext.get('grid-example2').remove();

essayes de faire :

Code:

1
2
//avant le render('grid-example2'
Ext.get('grid-example2').first().remove();

Code:

1
2
//avant le render('grid-example2'
Ext.get('grid-example2').down().remove();

08/05/2010, 18h19
MadMax4

Merci de tes efforts Takitano
j'ai testé :

Citation:

Ext.get('grid-example2').first().remove();

Ext.get('grid-example2').first() is null

l'autre proposition :

Citation:

Ext.get('grid-example2').down().remove();

Firebug répond :
Ext.get('grid-example2').down() is null

j'ai trouvé sur EXTJS API Documentation les éléments suivants sur la méthode RENDER :

Citation:

If you are using a {@link Ext.Container Container} object to house this Component, then do not use the render method.
A Container's child Components are rendered by that Container's {@link Ext.Container#layout layout} manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do include {@link Ext.layout.CardLayout}, {@link ext.layout.AnchorLayout}, {@link Ext.layout.FormLayout}, {@link Ext.layout.TableLayout}.
If the Container is already rendered when a new child Component is added, you may need to call the Container's {@link Ext.Container#doLayout doLayout} to refresh the view which causes any unrendered child Components to be rendered. This is required so that you can add multiple child components if needed while only refreshing the layout once.

j'ai le sentiment que je suis dans ce cas mais je ne sais pas exploité cette idée. Est-ce que tu comprends de quoi ça parle ?

cordialement
10/05/2010, 13h37
takitano
Bonjour,

je viens de faire des tests ... avec des panel et ca marchent ...

ca devrait marcher avec des grid ...
Code:

1 2 3 grid2.render('grid-example2'); grid2.getEl().remove(); grid2.render('grid-example2');
Takeshi,
11/05/2010, 14h31
MadMax4
bonjour Takitano

J'ai testé ta proposition et le résultat reste identique : les grilles s'affichent les unes sous les autres à chaque click.
la méthode "remove" ne semble pas les affecter, sans toutefois provoquer d'erreur.

De mon côté, j'ai testé une autre piste :
Code:

1 2 grid2.getView().refresh();
mais j'obtiens une erreur :
"this.grid is undefined" !

je désespère ...

cordialement
madmax
11/05/2010, 15h13
takitano

salut,

je regarderais ton pb ce soir ... et posterais un code fonctionnel ...

voila, dsl de ne repondre plus tot ...

a bientot takitano ;,

Bonsoir,

Le code marche ... il faudra maintenant, juste l'adapter a tes besoins ...

code 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
24
25
26
27
28
29
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Panel</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
 
    <!-- GC -->
 	<!-- LIBS -->
 	<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
 	<!-- ENDLIBS -->
 
    <script type="text/javascript" src="../../ext-all.js"></script>
 
    <script type="text/javascript" src="panels.js"></script>
 
 
</head>
<body>
<div id="grid-example">
</div>
 
<div id="grid-example2">
</div>
 
 
 
</body>
</html>

code javascript dans le fichier panels.js

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
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
var builder =  function(){
 
	// construit le store du grid 1
	this.store = new Ext.data.ArrayStore({
        fields: [
           {name: 'Processus'},
           {name: 'Nom', type: 'string'},
           {name: 'Nb', type: 'int'}]
    });
 
 
	// construit le select model du grid 1
	this.sm = new Ext.grid.RowSelectionModel({
		singleSelect: true,
		listeners: {
			'rowselect':function(sm,index, record) {
				toto = record.data.Processus;
				ligne = record.data.Nb;
				//document.DDT.proc.value=toto;
				var mydata2 = new Array();
				// code de test => a effacer...
				if(ligne==0)
					mydata2 = [[1,'aze','aze','aze'],[2,'ert','ert','ert']];
				if(ligne==1)
					mydata2 = [[1,'QQQ','QQQ','QQQ'],[2,'DDD','DDD','DDD']];
 
				// a mettre dans l'appel Ajax dans la fonction success
				temp.store2.loadData(mydata2);				
				temp.display_grid_2();
 
				//	appel ajax => a reactiver...
			/*	Ext.Ajax.request({
					url: 'Ajax_DDT.php',
					method:"POST",
					success: function(result,request) {
						var mydata2 = new Array();
						morceaux=result.responseText.split(',');
						for (var i=0; i<ligne; i++) { 
							var d_transition = new Array;
							for (var j=0; j<4; j++) { 
								d_transition.push(morceaux[(i*4)+j]);}
							mydata2[i] = d_transition;}
 
						temp.store2.loadData(mydata2);				
						temp.display_grid_2();
						//grid_ddt(mydata2);
						},
 
					failure: function ( result, request) { 
						Ext.MessageBox.alert('Problème', result.responseText); },
					headers: {'my-header': 'DDT'},
					params: {proc:toto}});*/
 
				}// fin rowselect
             }// fin listeners
      });
 
 
 
 
	// construit le grid_1
	this.grid_1 = new Ext.grid.GridPanel ({
        store: this.store,			
		sm: this.sm,
        columns: [
            {id:'Processus',header: 'Processus', width: 60, sortable: true, dataIndex: 'Processus'},
            {header: 'Nom', width: 165, sortable: true,  dataIndex: 'Nom'},
            {header: 'Nb', width: 40, sortable: true,  dataIndex: 'Nb'}],
 
        stripeRows: true,
//        autoExpandColumn: 'Processus',
        height: 155,
        width: 270,
        title: 'Processus',
        stateful: true,
        stateId: 'grid'
    });
 
 
 
 
	//	 construit le store du grid 2
	this.store2 = new Ext.data.ArrayStore({
		fields: [
		{name: 'Code'},
		{name: 'Nom_ddt', type: 'string'},
		{name: 'Etat', type: 'string'},
		{name: 'Nom_dirpro', type: 'string'}]
	});		
 
 
 
 
	//	construit le grid 2
	this.grid_2 = new Ext.grid.GridPanel({
		store: this.store2,
		columns: [
			{id:'Code',header: 'Code', width: 100, sortable: true, dataIndex: 'Code'},
			{header: 'Nom_ddt', width: 310, sortable: true,  dataIndex: 'Nom_ddt'},
			{header: 'Etat', width: 158, sortable: true,  dataIndex: 'Etat'},
			{header: 'Nom_dirpro', width: 138, sortable: true,  dataIndex: 'Nom_dirpro'}],
		stripeRows: true,
		height: 155,
		width: 717,
		title: 'DDT',
		stateful: false,
		stateId: 'grid2'});
 
 
 
	//	affiche le grid 1
	this.display_grid_1=function(){
	/*	var selectBox = document.getElementById("ListeProc"); 
		var nb = selectBox.options.length; 
		var mydata = new Array();
		for (var i=0; i<nb; i++) { 
			morceaux=selectBox.options[i].value.split(',');
			var d_transition = new Array;
			for (var j=0; j<3; j++) { 
				d_transition.push(morceaux[j]);}
			mydata[i] = d_transition; }		*/
		var mydata = new Array();
		mydata=[[1,"toto",0,'re'],[2,"tete",1,'re']];
 
		//	chargement du store 1
		this.store.loadData(mydata);
 
		//affichage de la grid 1
		this.grid_1.render('grid-example');
	};
 
 
 
 
	//	affiche grid 2
	this.display_grid_2=function(){
		this.grid_2.render('grid-example2');
		};
 
}
 
 
 
 
 var temp =null;
Ext.onReady(function(){
	temp = new builder();
 
	temp.display_grid_1();
	temp.display_grid_2();
});

12/05/2010, 12h45
MadMax4

Bonjour Takitano

J'ai noté l'heure à laquelle tu as posté ta réponse et je me sens confus de t'avoir fait travailler si tard.
je n'ai malheureusement pas réussi à implémenter ta solution car la grille 1 n'affichait plus rien.

Néanmoins, j'ai bien regardé ta proposition et j'ai, en suivant ton exemple, réinséré le code de la fonction affichant la grid-2 dans le corps de la fonction success de l'appel Ajax.
et là, le refresh (grid2.getView().refresh() ) fonctionne !

Super, je respire.
je n'aurai pas eu cette idée sans toi. Je te remercie sincèrement de ton investissement, qui fut très fructueux.

cordialement
madmax
12/05/2010, 13h48
takitano

ne t inquiete pas pour l'heure tardive,
c'est l heure du biberon ^^ pour mon petit ...

Je suis content que tu ais resolu ton pb ...

bon courage a toi !