rafraichir une grid

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

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, 12h54

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, 15h19

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, 18h26

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, 12h06

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, 15h03

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

rafraichir une grid

Ext JS / Sencha

Vue hybride

Discussions similaires

Partager

Partager