Discussion :

[Mako 5013]

Bonjour,

Me revoici avec un nouveau problème. J'ai une grille, dont le contenu est le résultat d'une recherche effectuée précédemment. Jusque là, tout va bien. Maintenant, j'aimerais faire en sorte que lorsque l'on clique sur une ligne, cela nous emmène sur la page contenant les informations détaillées de l'objet correspondant à la ligne en question. Et je dois avouer que j'ai pas mal de soucis au niveau de la syntaxe des évènements surtout...Ci-dessous l'ébauche de code correspondant :

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
 
var store = new Ext.ux.data.PagingArrayStore({
     // Store qui sera charge dans notre grille
});
var columnModel = new Ext.grid.ColumnModel({
    // ColumnModel qui sera charge dans notre grille                    
});
var grid = new Ext.grid.GridPanel({
     widthColumn: 1,
     autoHeight: true,
     enableColumnResize: false,
     store: store,
     plugins: checkColumn,
     cm: columnModel,
     viewConfig: {
          enableRowBody: true
     },
     selectionModel: new Ext.grid.RowSelectionModel({
          singleSelection: true,
          listeners: {
               rowbodyclick: function (grid,rowIndex,e) {
                    alert('coucou'); // Lorsque je clique sur une ligne, rien n'apparaît pour le moment
               }
          }
     }),
     bbar: new Ext.PagingToolbar({
          // Pagination
     })
});

Si jamais cela peut aider, le code de la grille en question est plus détaillée à la fin de cette discussion.

En outre, je ne vois pas trop comment faire pour récupérer les données de ma grille afin de savoir quel élément affiché dans la page suivante. Je me doute qu'il va falloir envoyer des données comme pour un formulaire, mais sinon...

Mako

[ddDeKeravel]

Bonjour Mako,

Pour ma part, je fais un lien hypertexte dans un champ de la ligne qui va appeler une méthode edit côté serveur. Il te faut passer aussi l'id de ton enregistrement dans le data store, pour que le serveur puisse l'afficher :
Data store

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
 
// create the data store
    var dataStore = new Ext.data.Store({
		proxy: new Ext.data.HttpProxy({
			url: Ext.app.baseUrl + '/consultclients/getSearchDatas'
		}),
		// create reader that reads the Topic records
		reader: new Ext.data.JsonReader({
			totalProperty: "results",
			root: "rows",
			fields: [
				//definition des champs
				{name: 'cli_id'},
				{name: 'cli_name'},
				{name: 'cli_adresse'},
			    {name: 'ca'},
				{name: 'tic'},
				{name: 'cli_rdv_dt'}
			]
		}),

Grid panel

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
 
var grid = new Ext.grid.GridPanel({
        columns: [
			{header: "Action", width:80,sortable: true,  dataIndex:   'Consulter', renderer:
			function(value, metadata, record, rowIndex, colIndex, store) {
				return Ext.app.flecheDroite
				+ '<a href="'
				+ Ext.app.editAction
				+ record.data.cli_id
				+ '" title="Consulter">'
				+ 'Consulter'
				+'</a>';
			}},
			{header: "Client", width:200,sortable: true, dataIndex: 'cli_name'},
			{id:'adrCol', header: "Adresse", width:310,sortable: true, dataIndex: 'cli_adresse'},
			{header: "CA",   width:120,sortable: true, dataIndex: 'ca'},
			{header: "Technicien",   width:120,sortable: true, dataIndex: 'tic'},
			{header: "Date de rdv",   width:80,sortable: true, dataIndex: 'cli_rdv_dt', renderer: Ext.util.Format.dateRenderer('d/m/Y')}
        ],
		loadMask:true,

[Mako 5013]

Bonjour,

Pour ma part, je fais un lien hypertexte dans un champ de la ligne...

Le soucis, c'est que les clients sont habitués à devoir "juste" cliquer sur la cellule de la table, et j'aimerais autant que possible garder cela en l'état. Mais merci tout de même de ton idée, je la garde en réserve, au cas où...

N'y a-t-il personne qui sache comment gérer un évènement sur une grille ? (clique sur ligne, sur cellule, etc.)

Mako

[takitano]

bonjour,

remplace singleSelection par singleSelect
et
selectionModel par selModel

[Mako 5013]

Bon, j'ai réussi à m'en sortir, mais pas vraiment en suivant les pistes que vous m'avez proposé.

Pour faire ce que je voulais, j'ai changé mon panel contenant ma grille par un formPanel, auquel j'ai accolé deux champs cachés, servant à envoyer les valeurs nécessaires issues de la ligne sélectionnée.

Pour l'appel à la fonction, avec la syntaxe suivante, cela fait ce que je souhaite :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
var grid = new Ext.grid.GridPanel({
     // config de ma grille
     listeners: {
          rowclick: function(g,index,ev) {
               champCache1.setValue('maValeur');
               champCache2.setValue(g.store.getAt(index).get('maValeurDansMaGrille'));
               formPanel.getForm().submit(); 
               //formPanel est le nom de mon formPanel...
          }
     }
});

Merci à vous pour l'aide.

Mako