Conserver une ligne sélectionnée dans un Grid

**MadMax4** · 29/04/2010, 12h00

Bonjour

Depuis quelques jours, je m'acharne sur l'utilisation des Grids ExtJS, et grâce à ce forum, j'ai pu afficher quelques belles grilles.
Je tombe aujourd'hui sur un nouveau souci :

Après sélection d'une ligne dans un grid, je fais un Submit qui me permet d'afficher d'autres données. Jusqu'ici tout va bien !
Mais je souhaite que la ligne sélectionnée dans le premier grid reste sélectionnée.
De base, sans action particulière, cette sélection disparait.

J'ai trouvé une instruction qui devrait me permettre de redonner le focus à la ligne en question :

grid.getView().focusRow(Numero_de_ligne);

En stockant dans une variable de session ce numéro, je devrais pouvoir atteindre cette ligne mais ça ne fonctionne pas.

D'où mes deux questions :
1) est-ce la bonne instruction ?
2) si oui, où faut-il la placer pour obtenir l'effet voulu après le Submit ?

Voici les extraits de code concernés :

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
 
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;
		document.DDT.proc.value=toto;
		document.DDT.i_proc.value=index; // <-- je sauvegarde le numéro de ligne
 		document.DDT.submit();
								                 }
             	}
 
      }),
 
        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,
        height: 155,
        width: 270,
        title: 'Processus',
        stateful: true,
        stateId: 'grid'
    });
 
    	grid.render('grid-example');
	indice = document.DDT.i_proc.value;
	if (indice != -1) {
	    grid.getView().focusRow(indice);  // <-- j'ai placé ici l'instruction mais ...
		}
 
					 })

merci de votre aide
cordialement

**takitano** · 29/04/2010, 15h20

Bonjour, j'ai pas tres bien compris ce que tu voulais faire ..

mais peut etre que tu pourrais remplacer ca

Code :

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

1
2
3
	if (indice != -1) {
	    grid.getView().focusRow(indice);  // <-- j'ai placé ici l'instruction mais ...
		}

par ...

Code :

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

1
2
3
4
 
if (indice != -1) {
   grid.getSelectionModel().selectRow(indice);
}

**MadMax4** · 29/04/2010, 15h41

Bonjour et merci Takitano

J'ai essayé ta modif et ... l'appli est partie en boucle !

Je pense que l'instruction n'est pas en cause. Je vais tenter d'expliquer plus clairement le problème.

Mon programme php propose dans une page un grid où l'utilisateur peut choisir un processus (mais qu'importe).
Quand il clique sur une ligne de ce grid, je fais un submit pour lancer sur le serveur une nouvelle requête avec comme paramètre l'id de la ligne choisie (c'est en passant grâce à toi que ceci fonctionne, cf précédent post).

Le résultat est l'affichage d'un autre grid contenant de nouveaux éléments.
Tout ça marche très bien.

Mon souci est de faire en sorte que la ligne sélectionnée dans le premier grid reste sélectionnée après le submit.

C'est d'une part un problème Javascript, pour l'instruction et d'autre part un problème php, pour la logique d'enchainement des comportements.

J'ai l'impression que le souci se situe plutôt au niveau php, car j'ai beau récupéré le numéro de la ligne, je n'arrive pas à conserver cette ligne sélectionnée.

Désolé d'avoir été aussi long.
En tout cas, merci de t'être penché sur mon cas.

Cordialement
madmax

**takitano** · 29/04/2010, 18h34

ok ...
j'ai une question :
1- lorsque le serveur recoit ton numero de ligne, est ce que tu recharge la page ... ? ou est ce un appel ajax ?

**MadMax4** · 29/04/2010, 19h16

Je recharge la page.
C'est pour ça que je perds (pour l'instant) la ligne sélectionnée.

Cordialement
madmax

**takitano** · 30/04/2010, 11h00

Je recharge la page.
C'est pour ça que je perds (pour l'instant) la ligne sélectionnée.

Cordialement
madmax

Bonjour,

Je me doutais qu'il y avait quelque chose...

Alors, il faudrait que tu mets en place au niveau de ton bouton submit un appel ajax, dont voici un exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
// Basic request
Ext.Ajax.request({
   url: 'foo.php',
   success: someFn,
   failure: otherFn,
   headers: {
       'my-header': 'foo'
   },
   params: { foo: 'bar' }
});

puis tu executes (avec la fonction eval) ce que tu récupères dans la fonction de retour, c'est a dire ... someFn ... il faut bien evidemment mettre du code javascript dans la réponse du serveur ...

avec ta méthode, tu t embarques dans des problematique tres complexe ... tres difficilement gérable ... en gros pour simplifier les choses ... tu demandes au serveur de faire le boulot du client ...

**MadMax4** · 03/05/2010, 09h05

Merci Takitano.
Je pense que tu as raison et qu'il faut que je revois entièrement la philosophie de ce php. Au début, je voulais uniquement le remettre au goût du jour mais il semble qu'il faille revoir les fondations !

Néanmoins,
quand j'enlève le submit et tout ce qu'il déclenche, l'instruction :
grid.getSelectionModel().selectRow(1);
ne fait rien !

Rappel du 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
 
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);
 
    // create the Grid
    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;
					                 }
             	}
      }),
 
        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,
        height: 155,
        width: 270,
        title: 'Processus',
        stateful: true,
        stateId: 'grid'
    });
 
    	grid.render('grid-example');
	grid.getSelectionModel().selectRow(1);
					 })
 
}

Une idée ?

cordialement
madmax

**takitano** · 03/05/2010, 12h24

ola ...

j'ai fais kelke teste pour repond a ton probleme ...

il faut en fait ajouter un event dans ton store ..., pkoi ton store ... parce que il faut attendre que tes données soient chargé ... pour effectuer ta selection ... !

au debut, j'ai pensé mettre ce code dans un event 'viewready', mais il est possible que les données ne soient pas disponible ...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
    var store = new Ext.data.ArrayStore({
        fields: [
           {name: 'Processus'},
           {name: 'Nom', type: 'string'},
           {name: 'Nb', type: 'int'},]
    listeners:{
      'load':function(s){alert(s.getCount());
if(grid.isVisible() && s.getCount()>0)
      grid.getSelectionModel().selectRow(1);
}
}
    });

mode debug : un petit code pour debugger ...
tu remplaces

Code :

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

toto = record.data.Processus;

par

Code :

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

1
2
alert('nb: '+sm.getCount());
toto = record.data.Processus;

**MadMax4** · 03/05/2010, 16h30

Désolé Takitano

Malgré tous tes efforts, ce nouvel "event" ne semble pas fonctionner. Il ne fait rien !
Mais ce n'est pas grave, parce que j'ai suivi tes conseils concernant l'appel Ajax et maintenant j'ai une version ajax qui fonctionne.

De plus, avec cette approche, le problème de la ligne à Re-sélectionner est réglé nativement puisqu'il n'y a pas à refaire un selectRow .

Grâce à toi, je crois avoir compris tout l'intérêt de l'approche AJAX par rapport au Submit et au rechargement de la page, et je t'en remercie vivement.

Je vais mettre "résolu" pour cette discussion même si d'autres questions ne manqueront pas de surgir.

Encore chapeau pour ton travail.
madmax

**takitano** · 03/05/2010, 18h37

salut,

bon, ben je suis ravi de t avoir aidé ... !

**jicaygg** · 02/12/2010, 14h05

Je remonte le sujet car c'est un problème auquel je suis confronté même si c'est pas tout à fait identique...

En fait j'ai une grid avec une sorte de liste de mails.
J'ai fais en sorte de pouvoir naviguer dans cette grid en utilisant les flèches Haut, Bas.
Dans cette grid, j'ai des pièces jointes (PDF), et lorsqu'on passe sur une ligne de ma grid qui contient une pièce jointe, je l'affiche dans une iframe viewer Adobe Reader.

Le souci c'est qu'Adobe prend le controle du focus.
Du coup je peux plus naviguer dans ma grid avec les flèches Haut, Bas.

Je n'arrive pas à récupérer le focus sur ma grid

J'ai mis un setTimeout pour essayer de reprendre le focus sur ma grid mais sans réussite

Je sais qu'Adobe utilise des Active X et qu'il est difficile de reprendre la main dessus.

J'ai donc essayé de laisser un délai relativement important, pour laisser Adobe prendre le focus et faire sa camboui, pour ensuite récupérer le focus sur ma grid... Mais impossible.

Je bloque complet et ne sait plus trop comment procéder.

Pour info : mon appli tourne uniquement sur IE, je peux même pas utiliser Firebug pour faire mes petits tests...

Je vous montre mon 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
 
var inboxLastContentId="";
 
function updatePreviewSummaryInbox(record,tabId)
	{
		var contentId = record.get(case_content_id');
 
        if(inboxLastContentId!=contentId && tabId!='TabOther')
        { 	         
         var docBase = record.get('docbase_id');
         var doc_type = record.get('a_content_type');
         var page=record.get(case_page_index');
         var url=getPreviewUrl(contentId, docBase, doc_type, page, false, true);
         setTimeout("preview('"+url+"','ifr_preview', 'div_preview')",600);
 
         /* TEST En METTANT SETTIMEOUT
 
         function SetFocus() {
        	    if (document.contentId) 
        	    	document.contentId.focus();
        	    else setTimeout('SetFocus()',800);
        	}
        	setTimeout('SetFocus()',800);
         */
 
 
        }
	}

Je vous laisse également un screen pour un apercu de l'appli.

Conserver une ligne sélectionnée dans un Grid

Ext JS / Sencha

Discussions similaires

Partager

Partager