Discussion :

[MadMax4]

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 :

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

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 :

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
// 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.

[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 :

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

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

Et là :

Code :

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

{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 .

[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

[Tiolebucheron]

Bonjour

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

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
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

[Belbarrin]

Hello, justement les enlever. Comme le code de Tio.

Et ça

Code :

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

1
2
{header: "InfoDGD", width: 0, hidden: true, dataIndex: 'InfoDGD'}
],

A la place de ça

Code :

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

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é.

[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