rafraichir une grid

**MadMax4** · 05/05/2010, 12h21

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 :

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

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

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

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

**takitano** · 05/05/2010, 13h54

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 :

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

1
2
Ext.get('grid-example2').removeAll();
grid2.render('grid-example2');

**MadMax4** · 05/05/2010, 16h19

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

**takitano** · 05/05/2010, 19h26

Salut,

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

Code :

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

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

ou sinon,

Code :

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

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

**MadMax4** · 06/05/2010, 13h06

merci Takitano

la solution :

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 :

//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

**takitano** · 06/05/2010, 16h03

a partir du code suivant,

Code :

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

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

essayes de faire :

Code :

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

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

ou

Code :

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

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

**MadMax4** · 08/05/2010, 19h19

Merci de tes efforts Takitano
j'ai testé :

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

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

l'autre proposition :

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 :

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

**takitano** · 10/05/2010, 14h37

Bonjour,

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

ca devrait marcher avec des grid ...

Code :

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

1
2
3
    grid2.render('grid-example2');
    grid2.getEl().remove();
    grid2.render('grid-example2');

Takeshi,

**MadMax4** · 11/05/2010, 15h31

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 :

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

1
2
 
grid2.getView().refresh();

mais j'obtiens une erreur :
"this.grid is undefined" !

je désespère ...

cordialement
madmax

**takitano** · 11/05/2010, 16h13

salut,

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

voila, dsl de ne repondre plus tot ...

a bientot takitano ;,

**takitano** · 12/05/2010, 01h26

Bonsoir,

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

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

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
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();
});

**MadMax4** · 12/05/2010, 13h45

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

**takitano** · 12/05/2010, 14h48

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 !

rafraichir une grid

Ext JS / Sencha

Discussions similaires

Partager

Partager