Comment faire un Grid complexe ?

[nolan5631]

Bonjours, je suis actuellement sur un projet m'obligeant à generer un tableau multidimensionnel complexe :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
|     GROUPE 1            |        GROUPE 2         |         GROUPE 3          |
| ssgrp 1 | ssgrp 2       | ssgrp 1 |    ssgrp 2    |     ssgrp 1 |   ssgrp 2   |
|_______________________________________________________________________________|
|   data  | data          | data    | data          | data     | data           |
|   data  | data          | data    | data          | data     | data           |
|  data  COLSPAN=2        | data    | data          |       data COLSPAN=2      |
|   data  | data          | data    | data          | data     | data           |
|   data  | data          |                  data COLSPAN=4                     |
|   data  | data          | data    | data          | data     | data           |
|                                   data COLSPAN=6                              |
|   data  | data          | data    | data          | data     | data           |
________________________________________________________________________________

Comme le montre l'exemple ci-dessus je récupère des données qui sont susceptible d'être identique pour plusieurs sous-groupe (je dois donc faire un colspan pour plus de lisibilité).

Pour generer l'entête pas de problème, grâce au "Grouped Header" , par contre pour faire des colspan dans le tableau je n'ai trouvé aucune technique que ce soit sur ce forum ou sur le support d'Extjs ou bien même sur google...

Si quelqu'un a déjà planché sur le problème et aurait quelques pistes je suis preneur, il doit forcement y avoir une solution...

[kenny.kev]

Pour cela il faut juste que tu effectues un traitement sur chaque ligne de ton grid.

avec le listener, au moment du chargement du store, tu test les groupes de valeurs et tu les unis.
La doc n'est pas accessible donc je ne peux pas te donner plus de précision mais avec ça normalement tu devrais t'en sortir

[nolan5631]

Merci pour ta réponse rapide, je comprends le principe (qui est le même en php/html) mais j'avoue avoir du mal a le mettre en pratique avec Extjs...

Un cas d’école simple serait possible ?

PS: Je suis étonné de ne pas trouver un seul cas concret parlant de cette "problématique"... Même sur Sencha, ils expliquent que les grids sont initialement conçu pour des tableaux simples et que ce cas de figure n'est pas pris en charge "officiellement"...

[kenny.kev]

ça devrais répondre à ta question :
http://www.sencha.com/forum/showthre...owBody-in-Ext4

[nolan5631]

Merci encore, mais j'avais déjà vu ce topic, il ne parle que du rowbody.

Faire une surcharge d'une ligne pour insérer un commentaire ou autre n'est pas mon but, et je ne vois pas comment a partir d'un rowbody je peux faire des colspans prédéfinis a la place des cellules "normales".

Mon tableau d'exemple n’étant peut être pas suffisamment clair, voici une version html :

Code :

1
2
3
4
5
6
7
8
 
<table>
	<tr><td colspan=2>GROUPE 1</td><td colspan=2>GROUPE 2</td><td colspan=2>GROUPE 3</td></tr>	
	<tr><td>SSGRP1.1</td><td>SSGRP1.2</td><td>SSGRP2.1</td><td>SSGRP2.2</td><td>SSGRP3.1</td><td>SSGRP3.2</td></tr>	
	<tr><td>data1</td><td>data2</td><td>data3</td><td>data4</td><td>data5</td><td>data6</td></tr>	
	<tr><td colspan=2>data7</td><td>data8</td><td colspan=3>data9</td></tr>	
	<tr><td colspan=6>data10</td></tr>	
</table>

[kenny.kev]

Tu as donné la réponse en disant "surcharge"
Tu surcharge la ligne, en réécrivant à la place de l'autre. Si tu peux la surcharger pour ajouter un commentaire alors tu la surcharge pour avoir tes colspan ou tu le souhaite.

Extjs ne le fait mais rien ne t'empêche de surcharger l'existant

[nolan5631]

Mouai, en théorie c'est très simple mais j'avoue que je sèche en pratique...

Pour le coup de la surcharge, j'arrive à rien, au pire je réussi a rajouter une ligne qui se colspan en dessous des mes datas mais impossible de modifier les cellules où se trouve mes données.

Je suis même allé jusqu’à essayer de faire mon tableau en HTML et d'utiliser la fonction qui permet de transformer un tableau HTML en grid extjs, le résultat est peu probant (les colspans fonctionnent mais je perd le group header pour le coup).

Au point ou j'en suis, c'est pas des théories qu'il me faut, c'est un cas concret...

Ca pourrait servir a plein de monde étant donné l'absence totale d'exemple sur le net pour ce cas (Je me demande même si c'est possible)...

A l'aiiiiiiiiiiiiiiiiiide

[abraxis]

Bonsoir,

Je ne suis pas sur que cela soit possible avec ExtJS...
Regarde par ici : How-to-add-rowspan-or-colspan-to-the-grid (le dernier message) tu trouvera peux être ton bonheur.

[nolan5631]

Oui merci pour le lien, mais comme j'ai dit lors de mon premier post, j'ai parcouru tout le forum Extjs pour trouver une reponse (donc ce post aussi ).

Et c'est d'ailleurs sur une solution équivalente que je suis parti, j'arrive a colspan mes cellules, cependant impossible de modifier la génération de la table (j'ai essayé de faire un override du TableChunker sans succés), je me retrouve (comme le dit le post) avec des Td en trop.

ExtJs affiche le tableau correctement mais le code généré est bien vilain (autant de TD en trop que de cellules "colspanée")

Il me reste donc a nettoyer ces foutus cellules.

Pour ma solution sous Extjs4, lors de la génération du store j'ajoute à mes data les colspan désirés (coté php) de la forme " data1¤¤¤3 "

Ensuite j'ai créé un renderer pour toutes colonnes qui ajoute l'attribut colspan au td de la donnée concernée :

Code :

1
2
3
4
5
6
7
8
9
 
function renderCell(value, metaData, record, rowIndex, colIndex, store) {
	 if (value){
		SplitData=value.split('¤¤¤');
		metaData.tdAttr = ' colspan='+SplitData[1];
		NewValue=SplitData[0];
	}
	return NewValue;
}

Si quelqu'un a une idée pour nettoyer les TD en trop je suis preneur...

Une fois la solution complète, je ferais un petit post cas d’école pour aider les prochains