Formulaire et Grille

Version imprimable

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:

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

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:

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:

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,

26/05/2010, 08h58
Mako 5013

Bonjour,

Citation:

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
26/05/2010, 10h25
takitano

bonjour,

remplace singleSelection par singleSelect
et
selectionModel par selModel

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:

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