Inserer dans données dans une Grid

Version imprimable

Bonjour,

Je débute sous ExtJs.
Je cherche à insérer dans une Grid des données récupérées d'un SELECT Option ...
Pour cela, j'ai récupéré l'exemple adéquat sur le site ExtJS.

Je construis un array avec les données du select:
Code:

1 2 3 4 5 6 7 8 9 10 11 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(','); for (var j=0; j<3; j++) { mydata[i,j] = morceaux[j]; } }
j'ai vérifié que chaque cellule du tableau comprenait bien ce que je voulais.

Puis j'essaie d'alimenter la grid par la fonction LoadData :
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 30 31 32 33 34 35 36 37 38 // create the data store 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, listeners:{ celldblclick: function(grid, rowIndex, columnIndex, e){ rowIndex++; alert("ligne " + rowIndex + " et " + "colonne" +columnIndex); } }, columns: [ {id:'Processus',header: 'Processus', width: 60, sortable: true, dataIndex: 'Processus'}, {header: 'Nom', width: 175, sortable: true, dataIndex: 'Nom'}, {header: 'Nb', width: 40, sortable: true, dataIndex: 'Nb'}, ], stripeRows: true, // autoExpandColumn: 'Processus', height: 150, width: 400, title: 'Processus', stateful: true, stateId: 'grid' }); // render the grid to the specified div in the page grid.render('grid-example');
Au final, le tableau ne m'affiche qu'un seul caractère par colonne !
Ce n'est surement pas la meilleure façon de procéder mais je souhaiterais comprendre quelle(s) erreur(s) j'ai commises dans ce code.

Merci aux spécialistes qui me liront, avec indulgence j'espère.
cordialement.

23/04/2010, 15h53
Belbarrin

Bonjour, je suis débutant aussi et donc à première vu sans aller chercher dans le complexe tu as deux erreurs de "," dans ton code. Avant la fermeture du "]", tu ne mets pas de ",".

Ici :

Code:

{name: 'Nb', type: 'int'},]

Et là :

Code:

{header: 'Nb', width: 40, sortable: true, dataIndex: 'Nb'},]

Essaye juste ça pour commencer, c'est bizarre que t'as pas d'erreur d'ailleurs. Tu devrais installer FireBug ça aide beaucoup pour l'extjs :ccool: .
23/04/2010, 16h03
MadMax4

Merci Belbarrin

C'est sympa de s'entraider entre débutant.
Tout d'abord, j'ai bien installé Firebug et je n'ai pas d'erreur à l'exécution.

Ensuite, j'ai bien mis les virgules que tu préconises, si tu regardes bien le code inséré.

Curieux non ?

Je te remercie tout de même de ta réponse.

Cordialement

Bonjour

Je n'ai pas vu d'erreur. Je te mets un code que je t'ai crit.

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
30
31
32
33
34
35
36
var storeDGD = new Ext.data.ArrayStore({
		fields: [
			{name: 'PerLibAdr'},
			{name: 'ProRef'},
			{name: 'ForNom'},
			{name: 'Info'},
			{name: 'InfoDGD'}
		]
	});
 
	var gridReportDGD = new Ext.grid.GridPanel({
		store: storeDGD,
		//Initialisation des colonnes
		viewConfig: { //Fait en sorte que la somme des largeurs de colonnes soit égale à la taille de la grille
			forceFit: true,
			headersDisabled: true
		},
		columns: [
			{header: "Nom", width: 250, dataIndex: 'PerLibAdr'},
			{header: "DGD", width: 55, dataIndex: 'ProRef'},
			{header: "Forêt", width: 200, dataIndex: 'ForNom'},
			{header: 'Info', width: 25,dataIndex: 'Info',renderer:function(){
				return '<img src="../img/plus.png" alt="Plus d\'informaiton" title="Information" />';
				}},
			{header: "InfoDGD", width: 0, hidden: true, dataIndex: 'InfoDGD'},
		],
		id: 'gridReportDGD',
		name: 'gridReportDGD',
		width: '100%',
		//TODO LA HAUTEUR N'EST PAS OPTIMISEE
		height: 275,
		layout : 'fit',
		border: false,
		listeners:{
			'rowclick': {fn: gridReportInfo}}
	});

Pour firebug, met un id et name dans ton grid. apres dans la console tu fais Ext.getCmp('gridReportDGD') et tu aura les info dans ton DOM. après tu peux lancer tes commandes de test. tu peux le faire pour le sotre aussi. Pour tous les objets ext.

bon courage

Tio

26/04/2010, 09h10
Belbarrin
Hello, justement les enlever. Comme le code de Tio.

Et ça
Code:

1 2 {header: "InfoDGD", width: 0, hidden: true, dataIndex: 'InfoDGD'} ],
A la place de ça
Code:

1 2 {header: "InfoDGD", width: 0, hidden: true, dataIndex: 'InfoDGD'}, ],
Perso si je mets des virgules juste avant la fermeture, c'est une jolie erreur assuré.
26/04/2010, 10h27
MadMax4

Merci Tio et BelBarrin

Grâce à vos indications, j'ai finalement mis le doigt sur le problème, facilement solvable.

Bravo pour votre travail.

cordialement
max